@charset "UTF-8";

/* ------------------------------------------------------------- 

STARBLESS CREATIVE / SP CSS
Mod : 2023.01.01 MT

------------------------------------------------------------- */

html{
overflow-x : hidden;
overflow-y : auto;
}

.sp {display: none; }
.slicknav_menu {display:none;}


@media screen and (max-width: 1260px), screen and (orientation: landscape) and (max-width: 1260px) {

header ul#gnavi {top:30px;right:20px;}
header .bnr_firstvisit {display:none;}
header .tel {display:none;}

}



@media screen and (max-width: 1000px), screen and (orientation: landscape) and (max-width: 1000px) {

body {font-size:1.5rem;}

.pc {display: none !important;}
.sp {display: block !important;}

.nav {display:none !important;}
#gnavi {display:none;}

header ul#gnavi {display:none;}




/* spmenu [SP MENU]
------------------------------------------------------------- */

#spmenu {
display:block !important;
position: fixed;
right: -300px;
top: 0;
height: 100%;
width: 300px;
color: #fff;
transition: .35s ease-in-out;
overflow-y:auto;
font-size: 1.5rem;
padding-top: 80px;
background: #000;
text-align: center;
}

#nav_sp {margin:0 0 100px 0;}
#nav_sp .nav_sp_logo {width:70%;max-width:250px;margin:30px 0;}

/* サブメニューは開けない */
#nav_sp .sub-menu-head:after,
#nav_sp .sub-menu-nav {display: none;}
#nav-toggle {display: block;}

/* nav open */
.open {/*overflow: hidden;*/}
.open #overlay {display: block;}
.open #spmenu  {transform: translate3d(-300px,0,0);}

/* #nav-toggle close */
.open #nav-toggle span:nth-child(1) {width: 32px;top: 11px;transform: rotate(45deg);background:#fff;}
.open #nav-toggle span:nth-child(2) {width: 0;left: 50%;}
.open #nav-toggle span:nth-child(3) {width: 32px;top: 11px;transform: rotate(-45deg);background:#fff;}

/* z-index */
#overlay {z-index: 0;}
#spmenu {z-index: 300;}
#nav-toggle {z-index: 400;}



/* Header
------------------------------------------------------------- */

header {width:100%;height:60px;position:fixed;z-index:1;transition: 0.5s;}
header .inner {width:100%;position: relative;}
header h1 {width:240px;transition: 0.5s;}
header h1 img {display:block;width:100%;margin:auto;padding:15px 0 0 15px;transition: 0.5s;}
header h1 a:hover img {filter:alpha(opacity=100);-moz-opacity: 0.7;opacity: 0.7;}

header ul#gnavi {display:none;}

header.s_header {width:100%;height:50px;position:fixed;z-index:1;}
header.s_header h1 {width:230px;}
header.s_header h1 img {display:block;width:100%;margin:auto;padding:13px 0 0 10px;}

header.s_header #nav-toggle span:nth-child(1) {top: 0;}
header.s_header #nav-toggle span:nth-child(2) {top: 9px;}
header.s_header #nav-toggle span:nth-child(3) {top: 18px;}

.open header.s_header #nav-toggle span:nth-child(1) {width: 32px;top: 11px;transform: rotate(45deg);background:#fff;}
.open header.s_header #nav-toggle span:nth-child(2) {width: 0;left: 50%;}
.open header.s_header #nav-toggle span:nth-child(3) {width: 32px;top: 11px;transform: rotate(-45deg);background:#fff;}




/* titleheader
------------------------------------------------------------*/

#titleheader {height:150px;background:url(../img/common/titleheader.jpg) 80% top / cover ;}
#titleheader h2{text-align:center;width:100%;margin:0 auto;padding:100px 0 0 0;font-size:2.4rem;}
#titleheader .sub { width:100%;margin:0 auto;font-size: 1.4rem; margin-bottom: 50px;text-align:center;text-shadow: 1px 1px 2px black;}


/* footer
------------------------------------------------------------- */

footer {padding:30px 0 30px 0;text-align:center;color:#fff;}
footer .inner {width:90%;margin:auto;}
footer .logo {width:300px;margin:0 0 2px 0;}

footer small {}
footer a:hover{color:#960}

footer ul.snsicon {clear:both;width:150px;margin:20px auto 0 auto;list-style:none;display:flex;justify-content: space-between;}
footer ul.snsicon li {width:40px;}
footer ul.snsicon li img {width:100%;}



/* TOP
------------------------------------------------------------- */

#top #mainvisual {position: relative;background:#000; width:100%;height:500px;box-shadow: 0 0 20px 0 rgba(0,0,0,0.4) inset;overflow: hidden;z-index:0;display: flex;justify-content: center;align-items: center;}

#top #mainvisual .content {z-index:1;}
#top #mainvisual .content .catch {text-align:center;font-size:3.2rem;color:#fff;width:100%;z-index:1;font-weight:400;text-shadow: 1px 1px 2px black;letter-spacing:1px;margin:0 auto 20px auto;}
#top #mainvisual .content .lead {text-align:center;font-size:1.6rem;color:#fff;width:100%;z-index:1;font-weight:300;text-shadow: 2px 2px 3px black;letter-spacing:0;margin:0 auto 0 auto;}
#top #mainvisual .content .lead span {font-size:3rem;font-weight:300;}

#top #mainvisual img {position: absolute; width:100%;height:800px;object-fit: cover;object-position: 50% 0;}



#top #lead {width:100%;padding:55px 0;margin:auto;background:#fff;text-align:center;color:#000;}
#top #lead p {font-size:1.6rem;margin:0 5% 50px 5%;font-weight:400;letter-spacing:0;line-height:2;}
#top #lead ul {width:100%;list-style:none;display:flex;justify-content: space-between;}
#top #lead ul li {width:30%;display:inline-block;margin:auto;}
#top #lead ul li img {width:100%;}




#top #newsArea {background: #fff;}
#top #newsArea .inner {width:90%;margin:0 auto;padding:50px 0;font-size:1.6rem;}
#top #newsArea .inner h2 {text-align:center;letter-spacing:5px;font-size:3rem;padding:0 0 50px 0;color:#113450;}

#top ul#topics {list-style:none;margin:0 0 20px 0;}
#top ul#topics li{position: relative;padding:10px 0 10px 30px;margin:0 0 10px 0;border-bottom:1px solid #f1f1f1;}
#top ul#topics li a {color:#645d51;text-decoration:none;}
#top ul#topics li a:visited {color:#645d51;}
#top ul#topics li a:hover {color:#000;}

#top ul#topics li::after,
#top ul#topics li::before {display: block;content: '';position: absolute;}
#top ul#topics li::after {top: 13px;left: 0;width: 20px;height: 20px;background-color: #fff;border-radius: 100%;}
#top ul#topics li::before {z-index: 2;top: 18px;left: 3px;width: 10px;height: 10px;border-right: 1px solid #ccc;
border-bottom: 1px solid #ccc;-webkit-transform: rotate(-45deg);transform: rotate(-45deg);}
#top ul#topics li .date{font-size:1.1rem;}

#top #access { background:#fff;color:#333;}
#top #access iframe {filter: grayscale(100%);vertical-align:top;}


/* service
------------------------------------------------------------- */

#service #titleheader {height:200px;background:url(../img/service/titleheader.jpg) 50% 50% / cover ;color:#fff;}
#service #titleheader h2{text-align:center;width:100%;margin:0 auto;padding:100px 0 0 0;font-size:2.8rem;}

#service #container {background: #fff;}
#service #container .inner {width:90%;margin:0 auto;padding:40px 5%;}

#service #container .inner h3 {font-size:1.7rem;font-weight:500;line-height:1.8;padding: 20px;margin:0 auto 0 auto;position: relative;}
#service #container .inner h3::before, #service #container .inner h3::after {content: '';width: 30px;height: 30px;position: absolute;}
#service #container .inner h3::before {border-left: solid 2px #666;border-top: solid 2px #666;top: 0;left: 0;}
#service #container .inner h3::after {border-right: solid 2px #666;border-bottom: solid 2px #666;bottom: 0;right: 0;}

#service h4 {font-size:2.2rem;font-family: "Times New Roman", "游明朝", "Yu Mincho", "游明朝体", "YuMincho", "ヒラギノ明朝 Pro W3", "Hiragino Mincho Pro", "HiraMinProN-W3", "HGS明朝E", "ＭＳ Ｐ明朝", "MS PMincho", serif;font-weight: 500;margin:0 0 1em 0;letter-spacing:1px;color:#000;}
#service h4:before {content: '';border-left: 2px dotted;margin-right: 1rem;}


#service #website {background: #f1f1f1;}
#service #website .inner {width:90%;margin:0 auto;padding:50px 0;}

#service #lp {background: #fff;}
#service #lp .inner {width:90%;margin:0 auto;padding:50px 0;}

#service #system {background: #f1f1f1;}
#service #system .inner {width:90%;margin:0 auto;padding:50px 0;}

#service #marketing {background: #fff;}
#service #marketing .inner {width:90%;margin:0 auto;padding:50px 0;}

#service #logomark {background: #f1f1f1;}
#service #logomark .inner {width:90%;margin:0 auto;padding:50px 0;}

#service #streaming {background: #fff;}
#service #streaming .inner {width:90%;margin:0 auto;padding:50px 0;}

#service #movie {background: #f1f1f1;}
#service #movie .inner {width:90%;margin:0 auto;padding:50px 0;}

#service #print {background: #fff;}
#service #print .inner {width:90%;margin:0 auto;padding:50px 0;}


#service dl {}
#service dl dt {float:none;width:100%;margin:0 0 20px 0;}
#service dl dt img {display:block;width:100%;max-width:500px;margin:auto;height:150px;object-fit: cover; }
#service dl dd {float:none;width:100%;}

#service  .note {text-align:center;margin:60px 0 40px 0;font-size:1.8rem;font-weight:500;}



/* about
------------------------------------------------------------- */

#about #titleheader {height:200px;background:url(../img/about/titleheader.jpg) 50% 50% / cover ;color:#fff;}
#about #titleheader h2{text-align:center;width:100%;margin:0 auto;padding:100px 0 0 0;font-size:2.8rem;}

#about #container {background: #fff;}
#about #container .inner {width:90%;margin:0 auto;padding:30px 0 60px 0;}

#about #container .inner h3 {font-size:1.6rem;font-weight:500;line-height:2;padding: 20px;margin:0 auto 50px auto;position: relative;}
#about #container .inner h4 {font-size:1.6rem;border-bottom:1px solid #ccc;padding:0 0 10px 0;margin:0 0 1em 0;}

#about #container .inner table {border-collapse: collapse;width:100%;margin:0 auto 50px auto;}
#about #container .inner table th {font-weight:500;padding:20px 1em 20px 0;border-bottom:1px solid #ccc;text-align:right;}
#about #container .inner table td {padding:20px 0;border-bottom:1px solid #ccc;}

#about #container .inner .note {text-align:center;margin:0 0 40px 0;font-size:1.8rem;font-weight:500;}



/* contact
------------------------------------------------------------- */

#contact #titleheader {height:200px;background:url(../img/contact/titleheader.jpg) 50% 50% / cover ;color:#fff;}

#contact #container {background: #fff;padding:0;}
#contact #container .inner {width:90%;margin:0 auto;padding:40px 0;}
#contact #container .inner h3 {font-size:1.6rem;margin:0 0 50px 0;font-weight:400;letter-spacing:0;line-height:2;text-align:center;}

#contact #container .cform {width: 100%;margin: auto;border-collapse: collapse;}
#contact #container .cform [type=submit] {display: inline-block;font-size: 20px;padding: 10px 30px;text-decoration: none;background: #ff8f00;color: #FFF;border-bottom: solid 4px #B17C00;border-radius: 3px;}

#contact #container .cform th {font-size: 14px;width: 100%;display: block;text-align:left;border-bottom: none;padding: 10px 0 0 0;font-weight: normal;}
#contact #container .cform td {font-size: 14px;width: 100%;display: block;line-height: 150%;border-bottom: none;padding: 10px 0;margin:0 0 10px 0;}





/* information
------------------------------------------------------------- */

#information #container {background: #fff;padding:0;}
#information #container .inner{width:90%;margin:0 auto;padding:50px 0;}
#information #sidebar {float:none;width:100%;padding:0;margin:0;}
#information #mainArea {float:none;width:100%;padding:0;margin:0;}

#information #sidebar h4 {padding:0 0 10px 0;margin:0 0 10px 0;border-bottom:2px solid #666;}
#information #sidebar ul {margin:0 0 20px 0;list-style:none;}
#information #sidebar ul li {padding:10px 0 10px 20px;border-bottom:1px dotted #ccc;}



/* END
------------------------------------------------------------- */
}