@charset "UTF-8";

/*!
Theme Name: Cocoon Child
Description: Cocoon専用の子テーマ
Theme URI: https://wp-cocoon.com/
Author: わいひら
Author URI: https://nelog.jp/
Template:   cocoon-master
Version:    1.1.3
*/

/************************************
** 子テーマ用のスタイルを書く
************************************/
/*必要ならばここにコードを書く*/
html, body {overflow-x: hidden !important;max-width: 100% !important;}
body.menu-open {overflow-x: hidden !important;position: relative;}
.custom-overlay {display: none;position: fixed;top: 0;left: 0;width: 100vw;height: 100vh;background-color: rgba(0, 0, 0, 0.5);z-index: 9998;opacity: 0;transition: opacity 0.5s ease;} 
.custom-overlay.open {display: block;opacity: 1; }
body {transition: margin-left 0.5s ease;margin-left: 0;}
body.menu-open {margin-left: -250px !important;}
.custom-menu-trigger {position: fixed !important;top: 20px !important;right: 20px !important;width: 36px;height: 28px;cursor: pointer;z-index: 10000 !important;background: none;border: none;padding: 0;display: block !important; }
.custom-menu-trigger span {display: block;position: absolute;left: 0;width: 100%;height: 4px;background-color: #27acd9;transition: all 0.5s ease;border-radius: 2px; }
.custom-menu-trigger.active span {background-color: #fff;}
.custom-menu-trigger span:nth-child(1) {top: 0;}
.custom-menu-trigger.active span:nth-child(1) {transform: translateY(12px) rotate(-45deg);}
.custom-menu-trigger span:nth-child(2) {top: 12px;} 
.custom-menu-trigger.active span:nth-child(2) {opacity: 0;}
.custom-menu-trigger span:nth-child(3) {bottom: 0;}
.custom-menu-trigger.active span:nth-child(3) {transform: translateY(-12px) rotate(45deg);}
.custom-nav {position: fixed !important;top: 0 !important;right: 0 !important;width: 250px;height: 100vh;background-color:#27acd9;z-index: 9999 !important;transform: translateX(250px);transition: transform 0.5s ease;padding-top: 100px;overflow-y: auto; }
.custom-nav.open {transform: translateX(0) !important; }
.custom-nav ul {list-style: none;margin: 0;padding: 0;}
.custom-nav li {color: #fff;text-align: center;padding: 15px 20px;border-bottom: 1px solid rgba(255, 255, 255, 0.1);transition: background-color 0.3s ease;}
.custom-nav li:hover {background-color: rgba(255, 255, 255, 0.1);}
.custom-nav a {color: #fff;text-decoration: none;display: block;font-size: 16px;}      

main#main.main{padding:0;border:none;}
div#content.content.cf{margin-top:0;}
.header-container{height:0;}
div#content-in.content-in.wrap{width:100%;}
.tagline{display:none;}
.content-in{justify-content:space-around;}
.fv{background:#E3E3E6;width:100%;height:100vh;position:relative;}
.logo{position: absolute;top: 40%;left: 50%;transform: translateY(-50%) translateX(-50%);-webkit- transform: translateY(-50%) translateX(-50%);width:100%;pointer-events:none;}
.catch{position: absolute;top: 75%;left: 50%;transform: translateY(-50%) translateX(-50%);-webkit- transform: translateY(-50%) translateX(-50%);font-size:150%;}
.header-in {display:block;height: 100vh;position:relative;}


#about{padding:100px 0;position:relative;width:100%;}
.h2-about{position:absolute;right:5%;top:50%;transform: translateY(-50%) translateX(-50%);-webkit- transform: translateY(-50%) translateX(-50%);}
.h2-about img{width:5vw;}
.inner{width:60%;margin:auto;}
.h2-aboutsp {display:none;}

#news{padding:100px 0;position:relative;width:100%;background:#E3E3E6}
.h2-news{text-align:center;}
.h2-news img{height:5vw;}
.nlist{margin:50px 0;}
.post-ttl{padding:10px 0;border-bottom:solid 1px #27acd9;}
.post-ttl a{text-decoration:none;color:#666;}
.date{color:#27acd9;padding-right:10px;}
.more-btn {display: block;text-align: center;vertical-align: middle;text-decoration: none;width:300px;margin: auto;padding: 1rem 4rem;border-radius: 100vw;color: #fff;background: #27acd9;}
.more-btn:hover {background-position: right center;background-size: 200% auto;-webkit-animation: pulse 2s infinite;animation: shad26 1.5s infinite;color: #fff;}
@keyframes shad26 {0% {box-shadow: 0 0 0 0 #27acd9;}70% {box-shadow: 0 0 0 10px rgb(39 172 217 / 0%);}100% {box-shadow: 0 0 0 0 rgb(39 172 217 / 0%);}}
.new-list{display:flex;flex-direction:row;justify-content:space-between;flex-wrap: wrap;width:100%;margin:auto;margin-bottom:50px;}
.new-list-box{width:30%;margin:20px 0;}
.new-list:after {content: "";display: block;width: 30%;height: 0;}
.new-list-box a{text-decoration:none;display:inline-block;color:#666;}
.new-list-box a :hover{opacity:0.7;}
.pagination{display:block!important;}
.pagination-next {display:none;}
.pnavi{display:flex;flex-direction:row;justify-content:center;margin-bottom:80px;}
.nav-links{display:flex;}
.pagination .page-numbers{display:inline-block;color:#27acd9;border:solid 1px #27acd9;background:#fff;margin:0;}
.pagination .current{color:#fff!important;background:#27acd9!important;border:solid 1px #27acd9;}
.pagination .next.page-numbers{width:40px;height:40px;}
.pagination .prev.page-numbers{width:40px;height:40px;}
.pagination a:hover{background:transparent;color:#27acd9;}

#service{padding:100px 0;position:relative;width:100%;}
.h2-service{position:absolute;left:10%;top:50%;transform: translateY(-50%) translateX(-50%);-webkit- transform: translateY(-50%) translateX(-50%);}
.h2-service img{width:5vw;}
.h2-servicesp{display:none;} 
.sbox{display:flex;flex-direction:row;gap:20px;flex-wrap:wrap;justify-content:space-between;}
.sctt{width:48%;text-decoration:none;color:#666;text-align:center;}
.sctt:hover {background-position: right center;background-size: 200% auto;-webkit-animation: pulse 2s infinite;animation: shad26 1.5s infinite;color: #666;}
.sttl{font-weight:bold;color:#27acd9;}

#contact{padding:100px 0;position:relative;width:100%;background:#E3E3E6}
.h2-contact{text-align:center;}
.h2-contact img{height:5vw;}
.cinner{margin-top:70px;}
.footer {margin-top:0;}

body:not(.home) .header-in {display: flex;height: auto;position: relative;}
body:not(.home) .logo {position: relative;top: auto; left: auto;width:20%!important;pointer-events:auto;}
.under-fv{background:#E3E3E6;height:40vh;position:relative;}
.h1-under{text-align:center;position: absolute;top: 50%;left: 50%;transform: translateY(-50%) translateX(-50%);-webkit- transform: translateY(-50%) translateX(-50%);width:100%;}
.h1-under img{height:7vw;}
.under-inner{width:70%;margin:auto;padding:100px 0;}

table tr:nth-of-type(2n+1) {background-color:transparent;}
.contact-table th{background:#fff;border-left:none;border-right:none;border-top:none;border-bottom:solid 1px #27acd9;}
.contact-table td{background:#fff;border-left:none;border-right:none;border-top:none;border-bottom:solid 1px #27acd9;color:#27acd9;font-weight:bold;}
.acceptance{text-align:center;margin-top:5vw;font-size:1.2vw;}
.must{background: #27acd9;color:#fff;font-size:80%;border-radius:10px;margin-left:10px;padding:5px 10px;}
.cbtn{text-align:center;margin-top:3vw;}
.cbtn p a{text-decoration:none;}
input[type='submit'] {display: block;text-align: center;vertical-align: middle;text-decoration: none;width:300px;margin: auto;padding: 1rem 4rem;border-radius: 100vw;color: #fff;background: #27acd9;}
input[type='submit']:hover {background-position: right center;background-size: 200% auto;-webkit-animation: pulse 2s infinite;animation: shad26 1.5s infinite;color: #fff;}
@keyframes shad26 {0% {box-shadow: 0 0 0 0 #27acd9;}70% {box-shadow: 0 0 0 10px rgb(39 172 217 / 0%);}100% {box-shadow: 0 0 0 0 rgb(39 172 217 / 0%);}}

.single div#content.content.cf {margin-top:70px!important;width: 70%; margin: auto;}

.fgrid{display:grid;grid-template-columns:repeat(3, 1fr);}
.fctt{padding:20px;border:solid 1px #E3E3E6;}
.under-ctt{margin-bottom:50px;}
.under-ctt h1{text-align:center;}
.under-ctt p{text-align:center;margin:50px 0;}
.uctt{margin:100px 0 50px 0;}
.uctt h2{margin-bottom:20px;} 
.flow-bx{display:flex;gap:40px;width:100%;margin:50px auto 0;}
.flow-ctt {width:25%;}
.flow-num{background: #E3E3E6;border-radius: 50%;width: 50px;height: 50px;display: flex;justify-content: center;align-items: center;margin:0 auto 30px;}
.flow-ctt h3{text-align:center;}
.fctt h3{font-size:1.2rem;}
.fctt p{font-size:1rem;}
.flow-ctt p{font-size:1rem;}
.flow-ctt h3{font-size:1.2rem;}

/************************************
** レスポンシブデザイン用のメディアクエリ
************************************/
/*900px以下*/
@media screen and (max-width: 900px){
  /*必要ならばここにコードを書く*/
body.menu-open {margin-left: -200px !important;}         
.custom-nav {width: 200px;transform: translateX(200px);}
.catch {margin: auto; text-align: center;width:100%;}
.inner {width: 90%;}
#about {padding: 70px 0;}
.h2-aboutsp{text-align:center;display:block;margin-bottom:50px;}
.h2-aboutsp img{height:10vw;}
.h2-about {display:none;}
#news {padding: 70px 0;}
.h2-news img {height: 10vw;}
#service {padding: 70px 0;}
.h2-service {display:none;}
.h2-servicesp {text-align:center;display:block;margin-bottom:50px;}
.h2-servicesp img{height:10vw;}	
.sctt {width: 100%;}
.h2-contact img { height: 10vw;}

.under-inner { width: 90%;}
.h1-under img {height: 10vw}
body:not(.home) .logo {left: 15%;width: 30% !important;}
	
.contact-table th{background:#27acd9;border:none;display:block;}
.contact-table th p{color:#fff;}
.must{background:#fff;color:#27acd9;}
.contact-table td{border:none;display:block;}
.new-list-box {width:100%;}
.single div#content.content.cf {width:90%;}
.h2-under{font-size:2.2rem;}
.under-tagline{font-size:1.1rem;}
.section-title{font-size:2rem;}
.features-grid{grid-template-columns:1fr;}
.services-list{grid-template-columns:1fr;}
.pricing-grid{grid-template-columns:1fr;}
.pricing-card.featured{transform:none;}
.service-page{padding:0 15px;}
.fgrid {grid-template-columns: repeat(1, 1fr);}
.flow-bx {flex-direction: column;}
.flow-ctt {width: 100%;}
.flow-num {margin: 0 auto 10px;}
}

/*834px以下*/
@media screen and (max-width: 834px){
  /*必要ならばここにコードを書く*/
}

/*480px以下*/
@media screen and (max-width: 480px){
  /*必要ならばここにコードを書く*/
}