@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;}


.hero{text-align:center;padding:80px 0;background:#27acd9;color:white;margin-bottom:60px;border-radius:12px;}
.h2-under{font-size:3rem;font-weight:bold;margin-bottom:20px;}
.under-tagline{font-size:1.4rem;margin-bottom:30px;opacity:0.9;}
.target{display:inline-block;background:rgba(255,255,255,0.2);padding:8px 16px;margin:0 8px;border-radius:20px;font-size:0.9rem;}
.features{margin-bottom:60px;}
.section-title{font-size:2.5rem;text-align:center;margin-bottom:40px;color:#2c3e50;position:relative;}
.section-title::after{content:'';display:block;width:60px;height:4px;background:#27acd9;margin:20px auto;}
.features-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(300px,1fr));gap:30px;margin-bottom:60px;}
.feature-card{background:#fff;padding:30px;border-radius:12px;box-shadow:0 8px 25px rgba(0,0,0,0.1);transition:transform 0.3s ease,box-shadow 0.3s ease;}
.feature-card:hover{transform:translateY(-5px);box-shadow:0 12px 35px rgba(0,0,0,0.15);}
.feature-icon{font-size:3rem;margin-bottom:20px;}
.h3-under{font-size:1.5rem;margin-bottom:15px;color:#27acd9;}
.feature-card p{color:#666;line-height:1.7;}
.services-list{display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:20px;margin-bottom:60px;}
.service-item{background:#f8f9fa;padding:25px;border-radius:8px;border-left:4px solid #27acd9;transition:background 0.3s ease;}
.service-item:hover{background:#e9ecef;}
.h4-under{font-size:1.2rem;color:#27acd9;margin-bottom:10px;}
.service-item p{color:#666;font-size:0.95rem;}
.pricing{margin-bottom:60px;}
.pricing-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(320px,1fr));gap:30px;}
.pricing-card{background:#fff;border-radius:12px;box-shadow:0 8px 25px rgba(0,0,0,0.1);overflow:hidden;transition:transform 0.3s ease;}
.pricing-card:hover{transform:translateY(-5px);}
.pricing-card.featured{border:3px solid #27acd9;transform:scale(1.05);}
.plan-name{background:#2c3e50;color:white;padding:20px;text-align:center;font-size:1.3rem;font-weight:bold;}
.featured .plan-name{background:#27acd9;}
.plan-price{text-align:center;padding:30px 20px 10px;font-size:2.5rem;font-weight:bold;color:#2c3e50;}
.currency{font-size:1.2rem;font-weight:normal;}
.plan-description{text-align:center;padding:0 20px 20px;color:#666;font-size:0.95rem;}
.plan-features{list-style:none;padding:0 30px 30px;}
.plan-features li{padding:8px 0;border-bottom:1px solid #eee;color:#555;position:relative;padding-left:20px;}
.plan-features li::before{content:'✓';position:absolute;left:0;color:#667eea;font-weight:bold;}
.plan-features li:last-child{border-bottom:none;}
.thanksp{text-align:center;margin-bottom:50px;}
.ng{text-align:center;font-weight:bold;color:red;margin:20px 0;}

/************************************
** レスポンシブデザイン用のメディアクエリ
************************************/
/*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;}
}

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

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