@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
*/

/************************************
** 子テーマ用のスタイルを書く
************************************/
/*必要ならばここにコードを書く*/
p.camp{text-align:center;color:red;font-weight:bold;}
.rcpc{padding: 20px;text-align: center; font-size: 14px;background-color: #F6f6f6;margin-top:30px;}
.rcpc p{margin-bottom:0;}
.grecaptcha-badge { visibility: hidden; }
#g-nav{display:none;}
main#main.main{padding:0;border:none;}
div#content.content.cf{margin-top:0;}
body{font-family :YuMincho, 'Yu Mincho',serif;}
.header-container{height:0;}
div#content-in.content-in.wrap{width:100%;}
.content-in{justify-content:space-around;}
.logo{z-index:2;text-align:left;width:30%;}
.contact-btn{z-index:10;position:fixed;right:0;top:30%;display: table-cell;width:70px;height:200px;background-color:#5BC7ED;vertical-align: middle;text-align:center;text-decoration:none;padding:20px 0;transition:0.7s;}
.contact-btn:hover{top:28%;}
.ctt-img{border-bottom:dashed 1px #fff;}
.ctt-txt{display:flex;flex-direction;justify-content:space-around;padding-top:10px;}
.ctt{color:#8c8c8c;writing-mode: vertical-rl;display:block;}
.cttj{color:#fff;writing-mode: vertical-rl;display:block;}
.header-menu{position:relative;z-index:1;width:50%;float:right;right:100px;top:-70px;}
.header-menu ul{display:flex;flex-direction:row;justify-content:space-around;padding-left:0;list-style:none;}
.header-menu ul li a{text-decoration:none;color:#5BC7ED;font-weight:bold;transition:0.5s;}


.top{height:100vh;width:100%;background:#FFE400;position:relative;}
.top-bx{display:flex;flex-direction:row;justify-content:space-around;z-index:1;margin: auto;position: relative;width:60%;}
.top-img{width:40%;border-radius:20px;border:solid 1px #8C8C8C;background:#fff;}
.top-img:first-child{transform: rotate(-15deg);top:50px;position:relative;}
.top-img:nth-child(2){z-index:2;}
.top-img:last-child{transform: rotate(15deg);top:50px;position:relative;}
.circle {width:100%;height:70%;border-radius:50% 50% 0 0/100% 100% 0 0;background:#fff;position:absolute;bottom:0;}
.catch-top{z-index:2;position:relative;top:50px;margin:auto;width:70%;text-align:center;}
.catch{z-index:2;position:relative;top:50px;margin:auto;width:70%;text-align:center;}
.imp{border-bottom:dotted 2px #8C8C8C;font-size:120%;}
.emphasis {-webkit-text-emphasis: filled;text-emphasis: filled;color:#5BC7ED;font-weight:bold;}
.target{width:170px;height:170px;border-radius:50%;background:#5BC7ED;z-index:2;position:absolute;bottom:80px;right:250px; display: inline-grid;text-align: center;align-content: center;color:#fff;}
.in-target{width:160px;height:160px;border-radius:50%;z-index:2;position:relative;display: inline-grid;text-align: center;align-content: center;border:dotted 2px #fff;margin:auto;}
.target-ctt{color:#5BC7ED;background:#fff;border-radius:20px;width:80px;margin:auto;}

#blog{padding:150px 0;background-color:#5BC7ED;background-image:linear-gradient(-90deg, #fff 50%, transparent 50%);background-size: 14px 14px;}
.slider1{display:flex;flex-direction:row;justify-content:space-between;margin: 100px 0; width:80%;margin:auto;}
.slick-slide {margin: 0 10px;}
.slick-slide img{border-radius:20px;}
.slide-arrow {bottom: 0;height: 0;margin: auto;position: absolute;top: 0;width: 0;}
.prev-arrow {cursor:pointer;left:-50px;background:#FFE400;width:50px;height:50px;border-radius:50%;border:none;z-index:3;-webkit-transform: translate3d(0, 0, 0);transform: translate3d(0, 0, 0);-webkit-transition: -webkit-transform ease-out 200ms;transition: -webkit-transform ease-out 200ms;transition: transform ease-out 200ms;transition: transform ease-out 200ms, -webkit-transform ease-out 200ms;}
.prev-arrow::before {font-family:"Font Awesome 5 Free";content:"\f104"; font-size:22px;font-weight:900;color:#5BC7ED;}
.next-arrow {cursor:pointer;right:-50px;background:#FFE400;width:50px;height:50px;border-radius:50%;border:none;-webkit-transform: translate3d(0, 0, 0);transform: translate3d(0, 0, 0);-webkit-transition: -webkit-transform ease-out 200ms;transition: -webkit-transform ease-out 200ms;transition: transform ease-out 200ms;transition: transform ease-out 200ms, -webkit-transform ease-out 200ms;}
.next-arrow::before {font-family:"Font Awesome 5 Free";content:"\f105"; font-size:22px;font-weight:900;color:#5BC7ED;}
.next-arrow:hover {-webkit-transform: scale(1.2, 1.2) translate3d(0, 0, 0);transform: scale(1.2, 1.2) translate3d(0, 0, 0);}
.prev-arrow:hover {-webkit-transform: scale(1.2, 1.2) translate3d(0, 0, 0);transform: scale(1.2, 1.2) translate3d(0, 0, 0);}

#solution{padding:100px 0;position:relative;height:1200px;}
.inner{width:70%;margin:auto;}
.solution-bx{display:flex;flex-direction:row;justify-content:space-between;width:70%;margin:auto;}
.solution-ctt:first-child{position:relative;top:250px;}
.solution-ctt:nth-child(2){position:relative;top:150px;}
.solution-ctt:last-child{position:relative;top:250px;}
.s-circle{width:300px;height:300px;border-radius:50%;border:solid 8px #FFE400;background:#fff;}
.u-circle{width:300px;height:300px;border-radius:50%;border:solid 8px #5BC7ED;background:#5BC7ED;top:-50px;position:relative;text-align:center;align-content: center;color:#fff;padding:20px 30px;font-size:90%;}
.catch2{z-index:2;position:relative;top:200px;margin:auto;width:70%;text-align:center;}

#service{padding:100px 0;position:relative;}
.h2-service{text-align:center;margin-bottom:50px;color:#5BC7ED;}
.h2-service::before{font-family: 'Marcellus';content:"Service";display:block;font-size:60%;color:#8c8c8c;font-weight:normal;}
.service-bx{display:flex;flex-direction:row;justify-content:space-between;flex-wrap:wrap;width:70%;margin:auto;}
.service-b{width:32%;border-radius:10px;border:solid 8px #5BC7ED;background:#fff;padding:5px;margin-bottom:30px;cursor: pointer;transition: transform .6s ease;}
.service-b a{text-decoration:none;color:#000;}
.service-b:hover {transform:scale(1.1,1.1);}
.service-y{width:32%;border-radius:10px;border:solid 8px #FFE400;background:#fff;padding:5px;margin-bottom:30px;cursor: pointer;transition: transform .6s ease;}
.service-y a{text-decoration:none;color:#000;}
.service-y:hover {transform:scale(1.1,1.1);}
.service-img{width:80%;margin:auto;}
.h3-service{border-bottom: dotted 2px #8C8C8C;}
.title{font-family: 'Marcellus';text-align:right;}  

#works{padding:100px 0;position:relative;overflow:hidden;background:#ffe400;}
.h2-works{text-align:center;margin-bottom:50px;color:#5BC7ED;}
.h2-works::before{font-family: 'Marcellus';content:"Works";display:block;font-size:60%;color:#8c8c8c;font-weight:normal;}
.slider2{display:flex;flex-direction:row;justify-content:space-between;margin: 100px 0; width:100%;margin:auto;}

#contact{padding:100px 0;position:relative;}
.h2-contact{text-align:center;margin-bottom:50px;color:#5BC7ED;}
.h2-contact::before{font-family: 'Marcellus';content:"Contact";display:block;font-size:60%;color:#8c8c8c;font-weight:normal;}
.c-button{text-align:center;}
input[type='submit'] {color:#fff;text-decoration:none;background:#5BC7ED;width:180px;display:inline-block;padding:5px;border:solid 1px #5BC7ED;height:40px;border-radius:20px;}
input[type='submit']:hover{background:#fff;border:solid 1px #5BC7ED;color:#5BC7ED;transition-duration: .7s;}
.wpcf7-spinner {display:none;}
.footer{margin-top:0;}

/*下層ページ*/
.list-inner{padding:0 10px;text-align:left;}
.new-list{display:flex;flex-direction:row;justify-content:space-between;flex-wrap: wrap;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{margin:40px 0;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:#5BC7ED;border:solid 1px #ffe400;border-radius:0;background:#ffe400;margin:0;border-radius:50%;}
.pagination .current{color:#5BC7ED;background:#ffe400;border:solid 1px #ffe400;border-radius:50%;}
.pagination .next.page-numbers{width:46px;}
.pagination .prev.page-numbers{width:46px;}
.pagination a:hover{background:transparent;color:#5BC7ED}
.h1-under{text-align:center;color:#5BC7ED;}
.h1-contact{text-align:center;color:#5BC7ED;margin-top:50px;}
.h1-contact::before{font-family: 'Marcellus';content:"Contact";display:block;font-size:60%;color:#8c8c8c;font-weight:normal;}
.under-img{width:30%;margin:auto;}
.under-inner{width:70%;margin:auto;margin-bottom:100px;}
.table-contact{margin:100px 0;}
.table-contact th{color:#5BC7ED;border-left:none;border-top:none;border-right:none;border-bottom:solid 2px #5BC7ED;background:transparent;}
.table-contact td{border-left:none;border-top:none;border-right:none;border-bottom:solid 2px #5BC7ED;background:transparent;}
table tr:nth-of-type(2n+1) {background:transparent;}
.search-edit, input[type="text"], input[type="password"], input[type="date"], input[type="datetime"], input[type="email"], input[type="number"], input[type="search"], input[type="tel"], input[type="time"], input[type="url"], textarea, select {padding: 11px;border: 1px solid #5BC7ED;}
.must{font-size:80%;background:#FFE400;border-radius:5px;margin-left:5px;padding:3px;}
.h1-about{text-align:center;color:#5BC7ED;margin-top:50px;}
.h1-about::before{font-family: 'Marcellus';content:"About";display:block;font-size:60%;color:#8c8c8c;font-weight:normal;}
.h1-works{text-align:center;color:#5BC7ED;margin-top:50px;}
.h1-works::before{font-family: 'Marcellus';content:"Works";display:block;font-size:60%;color:#8c8c8c;font-weight:normal;}
.single-work .sidebar{display:none;}
.single-work .under-entry-content{display:none;}
.single-work .main{width:70%;margin:auto;}
.new-list-box img{border-radius:20px;}
.table-work th{color:#5BC7ED;border-left:none;border-top:none;border-right:none;border-bottom:solid 2px #5BC7ED;background:transparent;width:30%;}
.table-work td{border-left:none;border-top:none;border-right:none;border-bottom:solid 2px #5BC7ED;background:transparent;width:70%;}
.eye-catch img{border-radius:20px;}
.h1-service{text-align:center;color:#5BC7ED;margin-top:50px;}
.h1-service::before{font-family: 'Marcellus';content:"Service";display:block;font-size:60%;color:#8c8c8c;font-weight:normal;}
.h2-under{border-bottom:dotted 2px #8C8C8C;margin:50px 0;color:#5BC7ED;}
.h1-plan{text-align:center;color:#5BC7ED;margin-top:50px;}
.h1-plan::before{font-family: 'Marcellus';content:"Plan";display:block;font-size:60%;color:#8c8c8c;font-weight:normal;}
.plan-bx{display:flex;flex-direction:row;justify-content:space-between;flex-wrap:wrap;}
.plan-ctt{width:32%;background:#5BC7ED;padding:20px 10px;border-radius:10px;}
.h3-plan{text-align:center;color:#5BC7ED;background:#ffe400;}
.price{text-align:center;color:#ffe400;font-size:150%;font-weight:bold;margin:10px 0;}
.tax{font-size:60%;}
.ul-plan {line-height: 1.8;list-style-type: none;margin:30px 0;padding-left:20px;}
.ul-plan li+li { margin-top: 5px;}
.ul-plan li { position: relative;padding-left: 25px;color:#fff;font-size:90%;}
.ul-plan li:before {content: "";position: absolute;width: 3px;height: 7px;top: .35em;left: 6px; -webkit-transform: rotate(50deg);-ms-transform: rotate(50deg);transform: rotate(50deg);border-right: 2px solid #fff; border-bottom: 2px solid #fff;}
.ul-plan li:after {content: "";position: absolute;top: .2em;left: 0; width: 15px;height: 15px;border: 1px solid #fff;border-radius: 2px;}
.plan-target{color:#fff;text-align:center;font-weight:bold;}

/*投稿ページ*/
.article h2{border-bottom:dotted 2px #8C8C8C;margin:50px 0;color:#5BC7ED;background:transparent;padding:10px 0;}
.article h3{border-bottom:0;border-right:0;border-top:0;padding:5px 10px;border-left:solid 7px #5BC7ED;}

/*lpページ*/
.lp-top{}
.lp-title{position:relative;text-align:center;padding:30px;}
.lp-first-box{display:flex;flex-direction:row;justify-content:space-evenly;width:100%;}
.lp-h1-img{width:30%;}
.lp-cttbox-01{width:70%;}
.lp-inner{width:80%;margin:auto;}
.lp-h3-contents p{font-size:20px;font-weight:normal;}
.lp-line{text-align:center;padding:100px;}
.lp-h2-title{text-align:center;padding:60px;}
.btn-signup{color:#fff;text-decoration:none;background:#5BC7ED;width:250px;display:inline-block;padding:5px;border:solid 1px #5BC7ED;height:40px;border-radius:20px;transition:0.7s;}
.btn-signup:hover{color:#5BC7ED;background:#fff;}
.btn-lp{text-align:center;}
.lp-quality-box{display:flex;flex-direction:row;justify-content:space-evenly;}
.lp-quality-box02{display:flex;flex-direction:row;justify-content:space-evenly;}
.lp-h2-contents{margin-bottom:30px;}
.lp-txt{text-align:center;}
.lp-quality-img{margin-bottom:30px;}
#lp-4{background:url(https://web-seo.jp/wp-content/uploads/2023/07/lp-number-img.png.png);background-size:cover;padding:100px 0;}
.lp-h3-title{border-bottom:1px solid #708090;width:500px;margin-left: auto;margin-right: auto;text-align:left;}
.number{color:#498ee0;font-size:30px;}
.lp-width{width:55%;margin:auto;}
.lp-seo{text-align:left;}
.lp-and{text-align:center;}
.lp-web{text-align:right;}
.lp-monthly{text-align:center;}
.lp-message{padding:10px;text-align:center;}
.lp-txt{border-bottom: dashed 2px #000080;;width:330px;font-size:20px;font-weight:bold;margin:auto;}
#lp-mny{padding:100px 0 ;}
.lp-seo,.lp-and,.lp-web{font-size:25px;font-weight:bold;background:linear-gradient(transparent 60%, #ff6 60%);}
.lp-m{font-size:30px;font-weight:bold;;background:linear-gradient(transparent 60%, #ff6 20%);text-align:center;}
.lp-center,.lp-consaltant,.lp-monthly,.lp-performance{text-align:center;}
.lp-right{text-align:right;}
.lp-consaltant{font-size:20px;font-weight:bold;}
#lp-performance-box{padding:100px 0;}

/************************************
** レスポンシブデザイン用のメディアクエリ
************************************/
/*1440px以下*/
@media screen and (max-width: 1440px){
  /*必要ならばここにコードを書く*/
.ylp-top-catch {font-size: 230%!important;}
.ylp-s-bx {height: 300px!important;}
.true {font-size: 130%!important;}
}

/*834px以下*/
@media screen and (max-width: 834px){
  /*必要ならばここにコードを書く*/
.top-bx{top:50px;}
.catch{top:100px;}
.target{right:100px;}
.header-menu{display:none;}
#g-nav{display:block;position:fixed;z-index:10;top:0;right: -120%;width:100%; height: 100vh;background:#5BC7ED;transition: all 0.6s;}
#g-nav.panelactive{right: 0;}
#g-nav.panelactive #g-nav-list{position: fixed;z-index: 999; width: 100%; height: 100vh;overflow: auto;-webkit-overflow-scrolling: touch;}
#g-nav ul { position: absolute;z-index: 999;top:50%;left:50%;transform: translate(-50%,-50%);padding-left:0;}
#g-nav li{ list-style: none;text-align: center;}
#g-nav li a{color:#ffe400;font-size:120%;text-decoration: none;margin-bottom:20px;display: block;letter-spacing: 0.1em;font-family: 'Marcellus';}
.openbtn1{position:fixed;z-index: 9999;top:40px;right: 20px;cursor: pointer;width: 50px;height:50px;}
.openbtn1 span{display: inline-block; transition: all .4s; position: absolute;left: 14px;height:2px;background-color:#000;width: 60%;}
.openbtn1 span:nth-of-type(1) {top:15px; }
.openbtn1 span:nth-of-type(2) {top:23px;}
.openbtn1 span:nth-of-type(3) { top:31px;}
.openbtn1.active span:nth-of-type(1) { top: 18px;left: 18px;transform: translateY(6px) rotate(-45deg); width: 60%;background:#fff;}
.openbtn1.active span:nth-of-type(2) { opacity: 0;background:#fff;}
.openbtn1.active span:nth-of-type(3){ top: 30px;left: 18px; transform: translateY(-6px) rotate(45deg);width: 60%;background:#fff;}
.home .top{height:60vh;}
.home circle{height:50vh;}
.catch-top{width:100%;top:auto;bottom:100px;position:absolute;}
.top{height:50vh;}
.top-bx {top: 150px;}
.circle{height:40vh;}
.table-contact{margin:50px 0;}
.table-contact th{display:block;width:100%;background:#5BC7ED;color:#fff;border-bottom:none;}
.table-contact td{display:block;width:100%;border-bottom:none;}
main#main.main {margin:0;}
.under-inner, .service-bx{width:80%;}
.new-list-box {width: 48%;}
.single-work .main {width:90%;margin: auto!important;margin-top:100px!important;}
.service-y, .service-b{width:48%;}
.plan-ctt{width:100%;margin-bottom:20px;}
.solution-bx{width:90%;justify-content:space-around;}
.s-circle, .u-circle{width:250px;height:250px;}
.u-circle p{font-size:80%;}
under-img{width:50%;}
}

/*480px以下*/
@media screen and (max-width: 480px){
  /*必要ならばここにコードを書く*/
.home .top{height:80vh;}
.home circle{height:60vh;}
.top{height:45vh;}
.circle{height:35vh;}
.top-bx {top:50px;}
.under-inner, .service-bx{width:90%;}
.service-y, .service-b{width:100%;}
#solution {padding: 0;height: 2000px;}
.solution-bx{flex-direction:column;}
.solution-ctt{margin:auto;}
.solution-ctt:first-child{top:200px;}
.solution-ctt:last-child{top:200px;}
.solution-ctt:nth-child(2) {top: 200px;}
.catch{width:90%;}
.catch2{width:90%;}
.catch-top{width:100%;top:auto;bottom:50px;position:absolute;}
.target{right:120px;bottom:200px;}
.next-arrow{right:-30px;}
.prev-arrow{left:-30px;}
.top-bx{width:90%;}
}