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

/************************************
** 子テーマ用のスタイルを書く
************************************/
/*必要ならばここにコードを書く*/
.header-in{display:none;}
.header-menu{display:none;}
.tagline{display:none;}
.top{background:url(https://ryd-king.jp/wp-content/uploads/2023/11/top-img.png);background-size:contain;background-repeat:no-repeat;width:100%;padding-top:50%;position:relative;}
.cv-area{position:absolute;bottom:20%;right:3%;width:40%;}
.top-btn{background:#00c854;height:60px;display:flex;align-items:center;justify-content:center;border-radius:10px;font-size:150%;font-weight:bold;color:#fff;text-decoration:none;transition:0.7s;}
.top-btn:hover{opacity:0.5;color:#fff;}
.top-btn img{height:50px;margin-right:10px;}
.btn-msg{font-weight:bold;color:#1992C6;}
.inner{width:70%;margin:auto;}
.h2-lp{position:relative;text-align:center;margin-bottom:100px;}
.h2-lp::before{background-color:#F4BC3C;border-radius:5px;bottom:-5px;content: "";height: 3px;left: 50%;position: absolute;transform: translateX(-50%);width:30px;}
.h3-lp{color:#1992C6;margin-bottom:30px;font-size:140%;}

#charm{padding:100px 0;}
.charm-bx{background:#D7F0F7;border-radius:10px;display:flex;flex-direction:row;justify-content:space-between;margin-bottom:50px;align-items:center;flex-wrap:wrap;}
.charm-ctt{padding:30px;width:50%;}
.charm-img{padding:30px;width:50%;}
#business{padding:100px 0;background:#D7F0F7;}
.business-bx{display:flex;flex-direction:row;justify-content:space-between;margin-bottom:50px;align-items:center;flex-wrap:wrap;}
.business-ctt{padding:30px;width:50%;}
.business-img{padding:30px;width:50%;}
#elected{padding:100px 0;}
.elected-bx{display:flex;flex-direction:row;justify-content:space-between;margin-bottom:50px;align-items:center;flex-wrap:wrap;}
.elected-ctt{padding:30px;width:50%;}
.elected-img{padding:30px;width:50%;position: relative;}
.elected-img p {position: absolute;top: 50%;left: 50%;-ms-transform: translate(-50%,-50%);-webkit-transform: translate(-50%,-50%);transform: translate(-50%,-50%);margin:0;padding:0;font-size:120%;text-align:center;color:#fff;background:#E44270;padding:20px;width:60%;opacity:0.8;}
#agency-flow{padding:100px 0;background:#D7F0F7;}
.lstepbar {margin: 0 auto;width: 80%;}
.lstepbar .lstepbarwrap {margin: 2em 0;position: relative;}
.lstepbar .lstepbarwrap .lsteptitle {display: inline-flex;align-items: center;}
.lstepbar .lstepbarwrap .lsteptitle .lstepcircle {z-index:1;display: inline-block;width: 3em;height: 3em;content: ""; border-radius: 50%; background-color: #000;color: #fff;text-align: center;}
.lstepbar .lstepbarwrap .lsteptitle .lstepcircle span {display: inline-block;line-height: 1.2em;font-size: 0.8em;font-weight: bold;position: relative;top: 0.9em;}
.lstepbar .lstepbarwrap .lsteptitle .stitle {margin: 0.5em;font-weight: bold; font-size: 1.2em;}
.lstepbar .lstepbarwrap .lsteptxt {padding-left: 3.5em;}
.lstepbar .lstepbarwrap .lsteptxt .ltxt {font-size: 0.9em;}
.lstepbar .lstepbarwrap .lstepline { width: 1px;height: calc(100% + 1em);background-color: #000;position: absolute;top: 1em;left: 1.5em;}
.lstepbarwrap:last-of-type .lstepline:last-of-type {display: none;}

#agency-contact{padding:100px 0;}
.ctt-msg{text-align:center;color:#1992c6;font-weight:bold;margin-bottom:50px;}
.ctt-ul {list-style-type: none;width:35%;margin: auto;}
.ctt-ul li {display: flex;align-items: center;gap: 0 10px;position: relative;padding: .3em .3em .3em 1.5em;}
.ctt-ul li::before,
.ctt-ul li::after { position: absolute;content: '';}
.ctt-ul li::before {left: 0; width: 1.2em; height: 1.2em;border-radius: 50%;background-color: #1992c6;}
.ctt-ul li::after {left: .6em;transform: translateX(-75%) rotate(-45deg); width: .3em;height: .3em;border-bottom: 2px solid #fff;border-right: 2px solid #fff;}
.bottom-btn{background:#00c854;height:60px;width:60%;margin:auto;margin-top:50px;display:flex;align-items:center;justify-content:center;border-radius:10px;font-size:150%;font-weight:bold;color:#fff;text-decoration:none;transition:0.7s;}
.bottom-btn:hover{opacity:0.5;color:#fff;}
.bottom-btn img{height:50px;margin-right:10px;}


/************************************
** レスポンシブデザイン用のメディアクエリ
************************************/
/*1023px以下*/
@media screen and (max-width: 1023px){
  /*必要ならばここにコードを書く*/
	.inner{width:90%;}
	.charm-bx{flex-direction:column-reverse;}
	.charm-ctt {width:100%;padding:20px;}
	.charm-img {width:100%;padding:20px;}
	.business-ctt {width:100%;padding:10px;}
	.business-img {width:100%;padding:10px;}
	.lstepbar {width:90%;}
}

@media screen and (min-width: 835px){
}

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

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