@charset "utf-8";
body{font-size:18px;}
@media screen and (max-width: 899px) {
  body{font-size:16px;}
}
/*ヘッダー*/
header{position: relative;position: sticky;top:0;}
@supports not (position: sticky) {
  header { position: relative; top:0; }
}


header .fitbtn{position: absolute;right:0;top:0;width:65px;}
header .hdr_contact{width:65px;height:223px;display: block;}
@media screen and (max-width: 599px) {
  header{top:auto;bottom:0;position: fixed;height:50px;}
  header .fitbtn{position: absolute;right:0;top:0;width:100%;display: flex;}
  header a{display: block;padding:0 1em;height:50px;line-height: 50px;}
  header img{margin-top: 0.2em;}
  header .hdr_contact{width:50%;background: #faad07;}
  header .hdr_siryo{width:50%;background: #d74949;}

  @supports not (position: sticky) {
    header { top:auto;bottom:0; }
  }
}


h1{text-align: center;font-size:160%;}
@media screen and (max-width: 899px) {
  h1{text-align: center;font-size:100%;}
}
h2{font-size:240%;}
@media screen and (max-width: 899px) {
  h2{font-size:140%;margin:0;text-align: left;}
}

h2.read{font-size:600%;}
h2.read ruby rt{font-size:0.18em;} 
h2.read .e_under .e_tgt::after {height:50px;bottom:20px;}
@media screen and (max-width: 1680px) {
  h2.read{font-size:500%;}
  h2.read .e_under .e_tgt::after {height:35px;bottom:20px;}
  }
  @media screen and (max-width: 1300px) {
    h2.read{font-size:350%;}
    h2.read .e_under .e_tgt::after {height:30px;bottom:20px;}
    }
@media screen and (max-width: 899px) {
  h2.read{font-size:300%;}
  h2.read .e_under .e_tgt::after {height:15px;bottom:0px;}
  }
  @media screen and (max-width: 699px) {
    h2.read{font-size:240%;}
    h2.read .e_under .e_tgt::after {height:15px;bottom:0px;}
    }  

h3{font-size:220%;color:#006699;}
@media screen and (max-width: 899px) {
  h3{font-size:120%;color:#006699;}
}
h4{font-size:160%;}
a{color:#0096ff;text-decoration:underline;}

.pick {
  position: relative;
  display: inline-block;
  padding: 0 45px;
}
.pick:before, .pick:after {
  content: '';
  position: absolute;
  top: 50%;
  display: inline-block;
  width: 44px;
  height: 2px;
  background-color: #FFF;
}
.pick:before {
  left:0;
  -webkit-transform: rotate(60deg);
  transform: rotate(60deg);

}
.pick:after {
  -webkit-transform: rotate(-60deg);
  transform: rotate(-60deg);
  right: 0;
}

/*ヘッドヴィジュアル*/
.wide{max-width:80%;margin:0 auto;position: relative;}
.hvisual {position: relative;z-index: -1;}
.hvisual .bg{position: absolute;right:0;bottom:0;z-index: -2;}

@media screen and (max-width: 899px) {
  .width{max-width: 95%;}
  .hvisual .bg{position:static;}
  h2.read{text-align: center;}
}
/*お困りではありませんか？*/
.trouble{
  color:#FFF;
  background-color: #00688e;
  background-image: url(../images/trouble_bg.jpg);background-position: right bottom;
  padding:4em 0;
}
.trouble h2{font-size:250%;display: flex;}
.trouble h2::before{content: url(../images/trouble_m.png);display:inline;margin-right:0.5em;}
.trouble h2::after{content: url(../images/trouble_w.png);display:inline;margin-left:0.5em;}
.trouble h2 span{display: inline-block;}

.trouble ul{margin:0 0 0 10em;}
.trouble ul li{font-size:150%;font-weight: 600;line-height:1;margin:1em 0;text-shadow: 1px 2px 3px #333;position:relative;padding-left:2em; }
.trouble ul li::before{content: url(../images/check1.png);display:inline;margin-right:0.5em;position: absolute;left:0;}
.trouble p{font-size:2em;font-weight: 600;margin-top:3em;}

@media only screen and (max-width:899px) {
  .trouble{
    padding:2em 0;
  } 
  .trouble h2{font-size:120%;}
  .trouble h2::before{content:"";}
  .trouble h2::after{content:"" ;}
  .trouble h2 span{display:inline;}
  .trouble ul{margin:0 0 0 1em;}
  .trouble ul li{font-size:110%;font-weight: 600;line-height:1.5;margin:0.3em 0 1em 0;text-align: left;padding-left:2.5em;}
  .trouble ul li::before{padding-right:0.8em;display: inline-block;}
  .trouble p{font-size:120%;font-weight: 600;margin-top:1.5em;}
}

.obi{color:#FFF;padding:1em 0;position: relative;}
.obi p{font-size:250%;font-weight: 600;margin:0;}
.obi:after{
  content: "";
  position: absolute;
  right: 0;
  bottom: -20px;
  left: 0;
  width: 0px;
  height: 0px;
  margin: auto;
  border-style: solid;
  border-width: 20px 20px 0 20px;
}

.obi_black{background: #000;}

.obi_black:after{
  border-color: #000 transparent transparent transparent;
}

.obi_blue{background: #0796fa;}

.obi_blue:after{
  border-color: #0796fa transparent transparent transparent;
}
@media only screen and (max-width:899px) {
  .obi p{font-size:130%;padding:0 1em;}
}
/*仕組み*/
.jsh{padding-bottom:3em;}
@media only screen and (max-width:1050px) {
  .jsh ul {width:100%;display: flex;justify-content: center;}
  .jsh ul li{vertical-align: middle;}
  .jsh ul li:nth-child(1){width:18%;}
  .jsh ul li:nth-child(2){width:8%;}
  .jsh ul li:nth-child(3){width:7%;}
  .jsh ul li:nth-child(4){width:30%;}
  .jsh ul li:nth-child(5){width:7%;}
  .jsh ul li:nth-child(6){width:30%;}
}
@media only screen and (max-width:819px) {
  .jsh ul li{width: 100% !important;text-align: center;margin:0.5em;}
}


/*理由*/
.reason{background:#0796fa;color:#FFF;font-size:3em;display: inline-block;width:180px;height:150px;position: relative;line-height:1;padding:10px;}
.reason span:after{content:"";    /*コレ*/transform: rotate(-45deg);
  width: 150px;
  border: 0;
  border-top: 1px solid #FFF;
  margin: 0;
  padding: 0;
display: block;
}
@media only screen and (max-width:899px) {
  .reason span:after{width:100px;}
  }


.reason div{position: absolute;right:20px;bottom:10px;font-size:2em;font-style: italic;}

.reason{margin-right:1em;}
/*理由１*/
.reason1{padding:3em 0;}
.reason1 .box1{width:60%; margin-top: 3em;}
.reason1 .box2{width:35%;}
.reason1 .box2 h3{font-size:125%;}
@media only screen and (max-width:899px) {
  .reason1 .box1{margin-top: 1em;}
  .reason1 .box2{text-align: center;}
 
  }

/*理由2*/
.reason2{padding:3em 0;}
.reason2 .box1{width:50%;margin-top: 3em;}
.reason2 .box2{width:45%;margin-top: 3em;}
@media only screen and (max-width:899px) {
  .reason2 .box1{margin-top: 1em;;}
  .reason2 .box2{margin-top: 1em;;}
}


@media only screen and (max-width:899px) {
  .reason{font-size:150%;width:120px;height:60px;margin-right:0;position: relative;margin-right:1em;}
  .reason span{position: absolute;right:10px;}
  .reason1 h2{width:calc(100% - 170px);padding:0;}
  .reason2 h2{width:calc(100% - 170px);padding:0;}
  .reason1 .box1{width:100%;}
  .reason1 .box2{width:100%;}
  .reason2 .box1{width:100%;}
  .reason2 .box2{width:100%;}
}

/*なぜ採用LPなのか*/
.whylp{background: url(../images/bg_note.png) repeat;padding-bottom: 3em;}
.whylp h3 {
  position: relative;
  overflow: hidden;
  padding: 0.5em 0.5em 0.5em 130px;
  background: #eff8ff;
  border: 2px solid #0099cc;
  font-size: 35px;
  line-height:1.2;
}

.whylp h3:before {
  position: absolute;
  top: -150%;
  left: -100px;
  width: 200px;
  height: 300%;
  content: '';
  -webkit-transform: rotate(25deg);
  transform: rotate(25deg);
  background: #0099cc;
}

.whylp h3 span {
  font-size: 45px;
  position: absolute;
  z-index: 1;
  top: 0;
  left: 0;
  display: block;
  padding-top: 13px;
  padding-left: 16px;
  color: #fff;
}
.whylp .box{background: #FFF;margin-top:-70px;padding:90px 2em 2em 2em;margin-bottom:2em;}
.whylp .float_right{width:25%;margin-left:3em;}
.whylp ol{list-style: decimal;border:1px solid #CCC;margin-bottom:1em;}
.whylp ol li{list-style: decimal;padding-left:1em;margin-left:2em;}

@media screen and (max-width: 899px) {
  .whylp h3 {
    font-size: 18px;
    text-align: left;
    padding: 0.5em 0.5em 0.5em 80px;
  }
  
.whylp h3:before {
  position: absolute;
  top: -150%;
  left: -100px;
  width: 170px;
  height: 300%;
  content: '';
  -webkit-transform: rotate(25deg);
  transform: rotate(25deg);
}
  .whylp h3 span {
    font-size: 22px;
    position: absolute;
    z-index: 1;
    top: 0;
    left: 0;
    display: block;
    padding-top: 8px;
    padding-left: 16px;
    color: #fff;
  }
  .whylp .float_right{width:60%;float:none;text-align: center;margin:0 auto;} 
  .whylp .box{padding:90px 1em 1em 1em;margin-bottom:2em;}
}  

/*メリット*/
.merit{background: url(../images/bg_note.png) repeat;padding-bottom: 3em;}
.merit .inner{background: #0477a1;border-radius: 15px;color:#FFF;padding:0 0 2em 0;margin-bottom:3em;}
.merit ul{margin:0 0 0 1.5em;}
.merit ul li{font-size:1.5em;font-weight: 600;line-height:1;margin:0.8em 0;text-shadow: 1px 2px 3px #333;position:relative;padding-left:2em; }
.merit ul li::before{content: url(../images/check1.png);display:inline;margin-right:0.5em;position: absolute;left:0;}

@media screen and (max-width: 899px) {
  .merit ul{margin:0 0 0 1em;padding:0 1em;}
  .merit ul li{font-size:110%;font-weight: 600;line-height:1.5;margin:0.3em 0 1em 0;text-align: left;padding-left:2em;}
  .merit ul li::before{padding-right:0.8em;display: inline-block;}
  .merit p{font-size:120%;font-weight: 600;margin-top:1.5em;}
}  

/*デメリット*/
.demerit{background: #d2d9df;padding-bottom:3em;}
.demerit li{width:31%;padding:15px 20px;background-color: #FFF;border-radius: 15px;
  background-image: url(../images/triangulate.png) ;
  background-repeat: no-repeat;
  background-position: center center;
}
.demerit h3{text-align: center;font-size:1.6em;}
@media screen and (max-width: 899px) {
  .demerit li{width:100%;margin-bottom:1em;}
}  


/*成果の上がるデザインにするため*/
.point {padding:2em 0 4em 0;}
.point .box1{width:40%;}
.point .box2{width:50%;}
.point .box2 ul li{width:47.5%;}
.point .box2 ul p{padding:15px;border-radius: 15px;color:#FFF;}

.point h3 .type_icon {width:35%;display: table-cell;}  
.point h3 .type_txt  {width:60%;display: table-cell;vertical-align: middle;}  


.point .type1 h3,.point .type2 h3{font-size:120%;display:table;}
.point h4{font-size:110%;}
.point .box2 ul li.type1 p{background: #ba6060;margin-top:1em;}
.point .box2 ul li.type2 p{background: #0796fa;margin-top:1em;}



@media screen and (max-width: 899px) {
  .point .box1{width:100%;text-align: center;}
  .point .box2{width:100%;margin-top: 2em;}
  .point .box2 ul li{width:100%;}
  .point .type1 h3,.point .type2 h3{font-size:140%;}
}

/*制作の流れ*/
.production{background: #daf0ff;padding:2em 0 4em 0;}
.production ul {margin:1em;}
.production span{background-color: #999;color:#FFF;font-size:0.7em;padding:0.2em 0.4em;margin-right:1em;}

/*サービス料*/
.service {padding:2em 0 4em 0;}
.service table{width:100%;}
.service table th {width:28%;}
.service table td {width:18%;}

.service td{text-align: center;}

.service table{width:100%;}

.service .img_box{margin-bottom:2em;}

.light{background-color: #3399ff;color:#FFF;}
.standart{background-color: #ff3366;color:#FFF;}
.premium{background-color: #660066;color:#FFF;}

.lightbg{background: #f0f7ff;}
.standartbg{background: #fff8f8;}
.premiumbg{background: #ffeeff;}

.service .tax{font-size:75%;display: block;}


/*お問い合わせ*/
.contact{background: #004270;padding:2em 0 4em 0;}
.contact h2{color:#FFF;position: relative;}
.contact h3{color:#FFF;position: relative;padding-top:30px;}
.contact hr{width:calc(103% / 2);margin:0 auto;border:0px;border-top:5px #FFF solid;padding:0;}
.contact .box1,.contact .box2{width:48.5%;}
.contact .box{background-color: #FFF;border-radius: 15px;padding:15px 25px;}
.contact h4 {
  position: relative;
  padding: 0.5em 0 0.8em;
  margin-bottom: 1em;
  font-weight: bold;
  font-size: 26px;
  background-image: linear-gradient(90deg, white 0% 40%, rgb(72, 108, 175) 40% 60%, white 60%);
  background-repeat: no-repeat;
  background-size: 100% 0.3rem;
  background-position: bottom;
}
.contact dl{border:1px solid #CCC;border-bottom:0;padding:0.5em;}
.contact dl#row_kiyak{border-bottom:1px solid #CCC;}
.contact dl dt{width:30%;display: inline-block;margin-right:5%;vertical-align: top;}
.contact dl dd{width:65%;display: inline-block;}
@media screen and (max-width: 899px) {
  .contact dl dt{width:100%;display: block;margin-right:0%;}
  .contact dl dd{width:100%;display: block;}
  
}

@media screen and (max-width: 899px) {
  .contact .box1,.contact .box2{width:100%;}
  .forpc{display: none;}
  }  
/*利用規約*/
  .contact .kiyaku{border:1px solid #CCC;padding:1em; height:150px;overflow-y: scroll; background:#efefef;font-size:75%;} 
  .contact .kiyaku h2, .contact .kiyaku h3{color:#333;font-size:15px;margin:0.1em 0;padding:0;}
  .contact .kiyaku ol {list-style-type:decimal;padding-left:1.2em;}
  .contact .kiyaku ol li{list-style-type:decimal;}
  .contact .kiyaku ol li ul{list-style-type:disc;padding-left:1.2em;}

  .contact h2.kiyakuttl{font-size:16px;color:#333;}
/*よくある質問*/
.faq{background: #EFEFEF;padding:2em 0 4em 0;}
.faq .box1,.faq .box2{width:47.5%;}
.faq h3{text-align: center;font-size:1.8em;}
.faq dl{background: #FFF;border-radius: 15px;padding:1.5em;}

.faq dt{font-weight: bold;font-size:1.2em;padding-bottom:1em;color: #0079cd;}
.faq dt::before{content:"Q";background-color: #0079cd;color:#FFF;padding:0.2em 0.5em;margin-right:0.5em;}

.faq dd{border-bottom: 1px dotted #CCC;padding-bottom:1.5em;margin-bottom:1.5em;}
.faq dd:last-child{border-bottom: 0px;padding-bottom:1.5em;margin-bottom:0em;}

@media screen and (max-width: 899px) {
  .faq .box1,.faq .box2{width:100%;}
  } 


/*資料請求*/
.siryo{background: #dc4444;background-image: url(../images/siryobg.jpg);background-size: cover;color:#FFF;padding-bottom:1em;}
.siryo h2 span{font-size:75%;display: block;}
.siryo h3 {border-top:3px double #FFF;border-bottom:3px double #FFF;color:#FFF;line-height:1.6;}

.siryo .box1{width:47.5%;}
.siryo .box2{width:47.5%;}
.siryo .pick{font-size:160%;font-weight: 600;}
.siryo .btn{margin-top:1em;}



@media screen and (max-width: 899px) {
  .siryo .box1{width:100%;}
  .siryo .box2{width:100%;}
  .btn a.btn_reserve{font-size:100%;}
} 

/*LINE*/
.line div{text-align: center;margin:1em auto;}
.line .qr img{max-width:280px;}
/*フッター*/
footer{padding:0;}
footer .flink{background: #EFEFEF;padding:1em 0;text-align: center;}
footer .fcopy{background: #333;color:#FFF;padding:1em 0;text-align: center;font-size:85%;}
footer p{margin:0;}


/*プログラム系*/
/*カレンダー*/
.calendar table{width:100%;font-size:92%;margin-bottom:0.5em}
.calendar table th{width:16%;padding:0.3em 0;}
.calendar table td{width:12%;padding:0.3em 0;}


.calendar table thead td{background: #eaf4ff;}
.calendar table tbody th{background: #eaf4ff;}
.calendar table thead td.sat{background: #b4d6ff;}
.calendar table thead td.sun{background: #ffb4b4;}

.calendar table thead td,.calendar table tfoot td{line-height:1.2;}
.calendar table th,.calendar table td{text-align: center;}
.calendar table td span{display: block;font-size:87.5%;}
.calendar tbody td{text-decoration:underline;color:#0796fa;}
.calendar td.of{background: #EFEFEF;vertical-align: top;text-decoration: none;color:#333;}

.calendar ul {margin-bottom:0.5em;}
.calendar ul li{border-radius: 5px;margin:0 0.3em;padding:0 0.7em;color:#FFF;font-size:87.5%;}
.calendar ul li.calb1{background: #062f67;}
.calendar ul li.calb2{background: #0853b8;}
.calendar ul li.calb3{background: #ea5c5c;}
.calendar ul li.calb4{background: #ce0f0f;}
.calendar ul li.of{background: #CCC;}

/*プログラム系*/
.calendar table td.w6 {
  background: #b4d6ff;
}
.calendar table td.w0 {
  background: #ffb4b4;
}
.calendar .calb { cursor:pointer; }
.calendar .calb.of { cursor:auto; pointer-events:none; }
#loading { position:fixed; top:0; left:0; width:100vw; height:100vh; z-index:996;
  opacity:.5; background:#333; display:none; }
#loading.on { display:block; }
#popup { position:fixed; top:50%; left:50%; transform:translate(-50%,-50%); z-index:997;
  padding:2em; background:#fff; opacity:0; display:none; transition: opacity .5s;
  overflow:hidden; border-radius:15px; }
#popup.on { display:block; animation: popup 1s forwards; }
@keyframes popup { 0% { opacity:0; } 100% { opacity:1; } }
#popup .ttl { font-size:100%; line-height:1.3; padding-bottom:.3em; margin-bottom:.3em; border-bottom:2px solid #66b; }
#popup .btnWrap { margin-top:.5em; text-align:center; }
#popup .btn { cursor:pointer; display:inline-block; border:1px solid #ccc; padding:.2em 1em;
  background:#0079cd; border-radius:5px; color:#fff; margin:0; }

#popup dl#row_cnam,#popup dl#row_unam{border-bottom:1px dotted #999;padding:0 0 0.5em 0; margin:0 0 0.5em 0;}


/*サンプル*/
.sample .img{width:60%}
.sample .data{width:35%}

@media screen and (max-width: 899px) {
  .sample .img{width:100%}
  .sample .data{width:100%}
}