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

/************************************
** 子テーマ用のスタイルを書く
************************************/
/*必要ならばここにコードを書く*/

body{
	font-feature-settings: "palt";
}




/*starryトップページ用*/
.wrap{
	width:100%;
}
.date-tags,
.breadcrumb{
  display:none;
}
.content {
    margin-top: 0;
    background: #f2f2f2;
}
.header{
    background: #f2f2f2;
}
#main {
    margin: auto;
    width: 100% !important;
    background: #f2f2f2;
}
.main{
padding:0;
}
figure{
text-align: center;
}
body{
font-family: '中ゴシックBBB', '游ゴシック体', '游ゴシック', "Yu Gothic", 'YuGothic', 'Hiragino Kaku Gothic Pro', 'ヒラギノ角ゴ Pro W3', "メイリオ", sans-serif;
    color: #333;
    font-size: 16px;
    line-height: 2;
    margin: auto;
    text-align: left;
    height: 100%;
    letter-spacing: 0.07em;
    background: #f2f2f2;
}
.article h2,
.article h3 {
border:none;
padding:none;
background: #f2f2f2 !important;
}


    body {
      margin: 0;
      font-family: "Noto Sans JP", "Helvetica Neue", sans-serif;
      color: #4a4a4a;
      background-color: #ffffff;
      line-height: 1.7;
    }

.hero .english-mission{
    font-family: 'Figtree', sans-serif;
        animation: marquee 12s linear infinite;
    color: #c3c3c3;
    font-size: 3rem;
    margin-bottom: 0;
    letter-spacing: 0;
        transform: translateX(100%);
    display: flex;
    width: 100%;
}


    /* ファーストビュー */
    .hero {
      /*height: 100vh;
      background: linear-gradient(rgba(255,255,255,0.9), rgba(255,255,255,0.9)),
                  url('https://images.unsplash.com/photo-1505691938895-1758d7feb511?auto=format&fit=crop&w=1400&q=80') center/cover no-repeat;
      display: flex;
      flex-direction: column;*/
      align-items: center;
      justify-content: center;
      text-align: center;
      padding: 0 1.5rem;
    }

    .hero h1 {
    font-family: "Playfair Display", serif;
    font-size: 4em;
    color: #3b3b3b;
    margin-bottom: 1rem;
    letter-spacing: 1px;
    font-weight: normal;
    line-height: 1.8;
}
.hero p {
      color: #5f5f5f;
	font-size: 1.1rem;
    margin-bottom: 2.5rem;
    font-weight: bold;
    }

    .hero .cta-btn {
      background-color: #d8c7b1;
      color: #fff;
      text-decoration: none;
      padding: 0.9rem 2rem;
      border-radius: 40px;
      font-weight: bold;
      letter-spacing: 1px;
      transition: 0.3s ease;
    }

    .hero .cta-btn:hover {
      background-color: #b9a78e;
    }



.hero img {
  width:1000px;
}
.hero h2{
   background: #f2f2f2;
    text-align: center;
    font-size: 3em;
    font-weight: normal;
    line-height: 2;
    margin: 0 0 .5em;
}
.top-web-massage{
color:#e17864;
}
.top-main-btn{
  text-align:center;
}
.btn-square-shadow {
    display: inline-block;
    padding: 0.3em 1em;
    text-decoration: none;
    background: #e97e6a;
    color: #FFF;
    border-bottom: solid 4px #6f673f;
    border-radius: 13px;
    font-size: 2em;

    -webkit-transition: ease 1s;
    transition: ease 1s;
    opacity: 1;
}
.btn-square-shadow:active {
  -webkit-transform: translateY(4px);
  transform: translateY(4px);
  box-shadow: 0px 0px 1px rgba(0, 0, 0, 0.2);
  border-bottom: none;
/*color: #6f673f;*/

}
.btn-square-shadow:hover{
    /*color: #6f673f;*/
	border-radius:100px;
	/*opacity: .65;*/
	
	opacity: .8;
}

.top-osusume{
    margin:6em auto;
    padding: 3em 0;
	width:100%;

background: repeating-linear-gradient(-45deg, #f5ebea, #ffeeeb 7px, #fbfbfb 7px, #fdf6f5 14px);
}



.top-osusume .wrap-in{
	width:850px;
	margin:auto;
}
.top-osusume .osusume-title{
background: repeating-linear-gradient(-45deg, #f5ebea, #ffeeeb 7px, #fbfbfb 7px, #fdf6f5 14px) !important;
text-align: center;
}
.top-osusume img {
  width:35%;
margin-right: 2em;
	height: fit-content;
}
.top-osusume .wrape-block{
display:flex;
}
.top-osusume .wrape-block ul li{
    margin: 0 0 1em 0;
}
















.top-service h2{
	font-size:3em;
    font-family: europa, sans-serif;
    font-weight: 300;
	text-align:left !important;
	margin-bottom: .1em;
    font-weight: normal;
}
.top-service .service-intro{
	margin: 0 2%;
    font-weight: bold;
}

.top-service .wrape-block{
    display:flex;
    margin: 1em 0;
}
.top-service .wrape-block img{
    width: 500px;
    margin: 1em;
}
.top-service .wrape-block div{
    margin: 1em;
}

.servise-list{
	padding-left:0 !important;
}

.servise-list li {
    display: flex;
    align-items: center;
    column-gap: 8px;
    color: #333333;
	font-size:15px;
    color:#666;
}

.servise-list li::before {
    width: 0.5em;
    height: 0.2em;
    border-bottom: 4px solid #2589d0;
    border-left: 4px solid #2589d0;
    transform: rotate(-45deg) translate(2px, -2px);
    content: '';
}

.button-detail{
	text-align:right;
}


.button-detail a {
    justify-content: center;
    position: relative;
    width: 200px;
    margin: 0 auto;
    padding: .9em 2em;
    border: none;
    background-color: transparent;
    color: #333;
    font-weight: 600;
    font-size: .8em;
	text-decoration:none;
	text-align:right;
}

.button-detail a::after {
    position: absolute;
    bottom: -3px;
    left: 0;
    transform: scaleX(0);
    transform-origin: center left;
    width: 100%;
    height: 2px;
    background-color: #333333;
    content: '';
    transition: transform .3s ease;
}

.button-detail a:hover::after {
    transform: scaleX(1);
}










.top-service h2{
    margin-left:0;
}
.heading12 {
	position: relative;
	font-size: 26px;
}
.heading12::before {
	content: attr(data-number);
	display: inline-block;
	margin-right: 20px;
	color: #498ee0;
	font-size: 30px;
	border-bottom: 1px solid #498ee0;
}






.top-black-btn{
  text-align: center;
  margin-top:5em;
}
.top-black-btn a{
    background: #333;
    color: #fff;
    text-decoration: none;
    padding: 1em;
}


.top-aboutme{
	margin-top:5em;
}

.top-aboutme h2{
  font-family: "Great Vibes", "Alex Brush", "Allura", "Dancing Script", cursive;
  font-size: 3rem;            /* 調整 */
  line-height: 1.05;
  letter-spacing: 0.02em;     /* 少し間を詰めたい場合は負の値も検討 */
  font-weight: 400;           /* 筆記体は大抵400が自然 */
  margin: 0;
  text-transform: none;       /* 大文字化は避ける */
	text-align:center;
  -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    text-rendering: optimizeLegibility;

}

.top-aboutme h3{
  text-align:center;
}
.top-aboutme p{
	width:700px;
	margin:auto;
}



.top-service{
    margin:6em auto;
    padding: 3em 0;
	width:1000px;
}



.marquee {
  width: 100%;
  overflow: hidden;
  white-space: nowrap;
  position: relative;
}
.marquee-content {
  display: flex;
  gap: 20px; /* テキスト同士の間隔 */
	
}
  animation: marquee-loop 10s linear infinite;
}
.marquee .marquee-content{
	
    font-size: 3em;
    color: #999;
	margin-bottom:0;
}

@keyframes marquee-loop {
  from {
    transform: translateX(0%);
  }
  to {
    transform: translateX(-50%); /* 半分の位置まで移動 */
  }
}






.loop-wrap {
  display: flex;
  align-items: center;
  overflow: hidden;
  height: 50px;
}
.loop-area {
  display: flex;
  animation: loop-slide 30s infinite linear 1s both;
  list-style: none;
  margin: 0;
  padding: 0;
}
.loop-area .content {
  width: 500px;
}
@keyframes loop-slide {
  from {
    transform: translateX(0);
  }
  to {
    transform: translateX(-100%);
  }
}






.Monitor-coupon{
	text-align:center;
}










.footer {
    background: #333;
    color: #fff;
}







.date-tags,
.breadcrumb{
  display:none;
}
.content {
    margin-top: 0;
    background: #f2f2f2;
}
.header{
    background: #f2f2f2;
}
#main {
    margin: auto;
    width: 1200px;
    background: #f2f2f2;
}
.main{
padding:0;
}
figure{
text-align: center;
}
body{
font-family: '中ゴシックBBB', '游ゴシック体', '游ゴシック', "Yu Gothic", 'YuGothic', 'Hiragino Kaku Gothic Pro', 'ヒラギノ角ゴ Pro W3', "メイリオ", sans-serif;
    color: #333;
    font-size: 16px;
    line-height: 2;
    margin: auto;
    text-align: left;
    height: 100%;
    letter-spacing: 0.07em;
    background: #f2f2f2;
}
.article h2,
.article h3 {
border:none;
padding:none;
background: #f2f2f2 !important;
}


.top-main img {
  width:100%;
}
.top-main h2{
   background: #f2f2f2;
    text-align: center;
    font-size: 3em;
    font-weight: normal;
    line-height: 2;
    margin: 0 0 .5em;
}
.top-web-massage{
color:#e17864;
}
.top-main-btn{
  text-align:center;
}
.btn-square-shadow {
    display: inline-block;
    padding: 0.3em 1em;
    text-decoration: none;
    background: #e17864;
    color: #FFF;
    border-bottom: solid 4px #6f673f;
    border-radius: 13px;
    font-size: 2em;
}
.btn-square-shadow:active {
  /*ボタンを押したとき*/
  -webkit-transform: translateY(4px);
  transform: translateY(4px);/*下に動く*/
  box-shadow: 0px 0px 1px rgba(0, 0, 0, 0.2);/*影を小さく*/
  border-bottom: none;
color: #6f673f;
}
.btn-square-shadow:hover{
color: #fff;
}

.top-osusume,
top-service{
margin:6em auto;
}
.top-osusume h2,
.top-service h2{
background: #fff;
text-align: center;
}
.top-osusume img {
  width:32%;
margin-right: 5em;
}
.top-osusume .wrape-block{
display:flex;
}
.top-osusume .wrape-block ul li{
    margin: 0 0 1em 0;
}
.top-service .wrape-block{
display:flex;
    margin: 1em 0;
}
.top-service .wrape-block img{
    width: 500px;
    margin: 1em;
}
.top-service .wrape-block div{
    margin: 1em;
}

.top-black-btn{
  text-align: center;
  margin-top:5em;
}
.top-black-btn a{
    background: #333;
    color: #fff;
    text-decoration: none;
    padding: 1em;
}






.footer {
    background: #333;
    color: #fff;
}



/*トップメインのアニメーション画像*/
.animated-image {
    /* アニメーション開始前の初期設定 */
    opacity: 0;
    transform: scale(0.5); /* 開始時は少し縮小 */
    border-radius: 50%;   /* 開始時は完全に丸い */
    width: 500px;         /* 画像の初期サイズ */
    height: 500px;        /* 画像の初期サイズ */
    display: block;
    margin: 0 auto;       /* 画像を中央揃えにする場合 */
    
    /* アニメーションの定義 */
    animation: appear-and-grow 2s ease-out forwards; /* 2秒かけて実行, 終了状態を維持 */
}

@keyframes appear-and-grow {
    0% {
        opacity: 0;
        transform: scale(0.5);
        border-radius: 50%; /* 完全に丸い */
    }
    50% {
        opacity: 1; /* 中間点で完全に表示 */
        transform: scale(0.75); /* 中間点で少し拡大 */
        border-radius: 50%; /* 中間点までは丸みを維持 */
    }
    100% {
        opacity: 1;
        transform: scale(1); /* 最終的なサイズ（元のサイズ） */
        border-radius: 0;    /* 最終的に四角形（角丸なし） */
    }
}











/* =============================
   Splash Screen
============================= */
.splash-screen {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: #ffffff;
    z-index: 1000;
}
.splash-screen img {
    width: 30%; /* 表示幅の調整 */
}







/************************************
** レスポンシブデザイン用のメディアクエリ
************************************/
/*1023px以下*/
@media screen and (max-width: 1023px){
  /*必要ならばここにコードを書く*/
}

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

/*480px以下*/
@media screen and (max-width: 480px){

	/*トップページ
	 ----------------*/
	#main{
		width:100% !important;
	}
	/*横余白ゼロ*/
	.main.main, div.sidebar{
		padding:0 !important;
	}
	/*看板下の余白非表示*/
	.entry-title{
		display:none;
	}
	.top-main h2{
		font-size:26px !important;
	}
	.btn-square-shadow{
		font-size:16px !important;
	}
	.top-osusume .wrape-block{
		display:block !important;
		margin:0 5%;
	}
	.top-osusume img{
		width:100% !important;
	}
.top-osusume .wrape-block ul li {
    margin: 0 0 .5em 0;
}
	
	.top-service .wrape-block{
		display:block !important;
	}
	.top-service .wrape-block img {
		width: 100% !important;
		margin:0 !important;
	}
	
	
	
	
	
}