@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 {
  scroll-padding-top: 72px;
  font-size: 62.5%;
}


body{
	width: 100%;
    height: 100%;
    background-color: #fff;
    -webkit-text-size-adjust: 100%;
    font-family: 'Noto Sans JP', 'Hiragino Kaku Gothic ProN', 'ヒラギノ角ゴ ProN W3', 'Meiryo', 'メイリオ', 'ＭＳ Ｐゴシック', 'MS P Gothic', Osaka, Arial, Helvetica, Verdana, sans-serif;
    font-size: 1rem;
    line-height: 1.6;
    font-weight: 400;
    color: #000;
}
*,
*:before,
*:after { -webkit-box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; box-sizing: border-box; }

img { height: auto; max-width: 100%; border: none; vertical-align: top; }
strong { font-weight: 500; }
iframe { max-width: 100%; }
picture { display: block; position: relative; width: 100%; }


a{
	transition: 0.3s;
}

a:hover { text-decoration: none; }




.article h2{
	background: none;
    padding: 0;
    margin: 4em 0 1em;
    font-size: 1.65em;
    color: #272727;
}
.article h3{
    border:none;
	color:#615858;
	font-size:19px;
}


/*-----------------------
　目次
------------------------*/
.toc {
    background-color: #f0f0f0;
    padding: 2rem;
    margin: 3em auto;
	border:none;
	color:#4d4d4d;
	font-size: 14px;
	width:400px;
}
.toc-title {
    font-size: 1.1em;
    display: block;
    padding: 2px 16px;
    margin: 0 0 1.5rem;
    line-height: 1;
    font-weight: 700;
    border-left: .45em solid #ccc;
    padding-left: .55em;
	text-align:left;
}
.toc-list li{
    margin-top: .5rem;
    border-top: 1px solid #e5e5e5;
    padding-top: .5rem;
	font-weight:bold;
}
.toc-list li ul li {
    padding-left: 1em;
    font-size: 13px;
    font-weight: normal;
}
.toc_list>li>a {
    font-weight: 600;
    letter-spacing: .05em;
}


/*-----------------------
 記事
------------------------*/

/*記事ページ　コンテンツ中央寄せ*/
.no-sidebar .content-in{
    max-width: 1120px;
}
/*画像を横幅いっぱいに広げる*/
.wp-block-image img {
    display: block;
    width: 100%;
}


/*---------------------
 アニメーション①
 --------------------*/
.img-frame-1{
  width: 100%;
  height: 46vw;
  overflow: hidden;
  position: relative;
}
.img-frame-1>div{
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 46vw;
  background-position: center center;
  background-size: cover;
  background-repeat: no-repeat;
  z-index: 10;
  opacity: 0;
  animation-name: fade;
  animation-duration: 12s;
  animation-iteration-count: infinite;
}
@keyframes fade {
  0%{
    opacity: 0;
  }
  20%{
    opacity: 1;
  }
  80%{
    opacity: 0;
    transform: scale(1.2);
  }
  100%{
    opacity: 0;
    z-index: 0;
  }
}
/* 1枚目のスライド */
.img-frame-1>div:first-of-type{
  background-image: url(https://starrysolid.com/wp-content/uploads/2025/11/sample-animation-cake-03-1024x717.jpg);
}
/* 2枚目のスライド */
.img-frame-1>div:nth-of-type(2){
  background-image: url(https://starrysolid.com/wp-content/uploads/2025/11/sample-animation-cake-02-1024x717.jpg);
  animation-delay: 4s;
}
/* 3枚目のスライド */
.img-frame-1>div:last-of-type{
  background-image: url(https://starrysolid.com/wp-content/uploads/2025/11/sample-animation-cake-05-1024x717.jpg);
  animation-delay: 8s;
}
/* 4枚目のスライド */
.img-frame-1>div:last-of-type{
  background-image: url(https://starrysolid.com/wp-content/uploads/2025/11/sample-animation-cake-06-1024x717.jpg);
  animation-delay: 12s;
}


/*---------------------
 アニメーション②
 --------------------*/

---------------------------------------------------------------------------*/
/*1枚目*/
@keyframes slide1 {
	0% {left: 110%;}
	3% {left: 0%;}
	20% {left: 0%;}
	23% {left: -110%;}
	100% {left: -110%;}
}
/*2枚目*/
@keyframes slide2 {
	0% {left: 110%;}
	33% {left: 110%;}
	36% {left: 0%;}
	53% {left: 0%;}
	56% {left: -110%;}
	100% {left: -110%;}
}
/*3枚目*/
@keyframes slide3 {
	0% {left: 110%;}
	66% {left: 110%;}
	69% {left: 0%;}
	86% {left: 0%;}
	89% {left: -110%;}
	100% {left: -110%;}
}

/*mainimg*/
.img-frame-2 {
	clear: left;
	position: relative;
	width: 100%;
	height: 600px;
	background: #eee;
	overflow: hidden;
}
.img-frame-2 .slide1,
.img-frame-2 .slide2,
.img-frame-2 .slide3 {
	position: absolute;left:0px;top:0px;width: 100%;height: 100%;
	animation-duration: 15s;				/*実行する時間。「s」は秒の事。*/
	animation-iteration-count:infinite;		/*実行する回数。「infinite」は無限に繰り返す意味。*/
	animation-delay: 4s;					/*アニメーションを遅れて開始させる。「s」は秒の事。*/
	animation-fill-mode: both;				/*アニメーションの待機中は最初のフレームを、アニメーションの完了後は最後のフレームを維持する。*/
	transition: 0.4s;						/*マウスオン時の移り変わるまでの時間設定。0.4秒。*/
}
/*メッセージ欄*/
.img-frame-2 span {
	position: absolute;z-index: 1;
	left: 0px;			/*左から0pxの場所にブロックを配置*/
	bottom: 30px;		/*下から30pxの場所にブロックを配置*/
	width: 90%;			/*幅。下のpaddingと合計して100になるように。*/
	padding: 10px 5% !important;	/*上下、左右へのボックス内の余白。*/
	background: #000;	/*背景色（古いブラウザ用）*/
	background: rgba(0,0,0,0.8);	/*背景色。0,0,0は黒の事で0.8は80%色がついた状態の事。*/
	color: #fff;
}
/*1枚目*/
.img-frame-2 .slide1 {
	background: url(https://starrysolid.com/wp-content/uploads/2025/11/sample-animation-cake-03-1024x717.jpg) no-repeat center center/cover;
	animation-name: slide1;	
}
.img-frame-2 .slide1:hover {
	background: url(https://starrysolid.com/wp-content/uploads/2025/11/sample-animation-cake-03-1024x717.jpg) no-repeat center center/cover;
}
/*2枚目*/
.img-frame-2 .slide2 {
	background: url(https://starrysolid.com/wp-content/uploads/2025/11/sample-animation-cake-02-1024x717.jpg) no-repeat center center/cover;
	animation-name: slide2;	
}
.img-frame-2 .slide2:hover {
	background: url(https://starrysolid.com/wp-content/uploads/2025/11/sample-animation-cake-02-1024x717.jpg) no-repeat center center/cover;
}
/*3枚目*/
.img-frame-2 .slide3 {
	background: url(https://starrysolid.com/wp-content/uploads/2025/11/sample-animation-cake-05-1024x717.jpg) no-repeat center center/cover;
	animation-name: slide3;	
}
.img-frame-2 .slide3:hover {
	background: url(https://starrysolid.com/wp-content/uploads/2025/11/sample-animation-cake-05-1024x717.jpg) no-repeat center center/cover;
}



/* ===============================================================
   Splash Screen
=============================================================== */







/************************************************************************************************************************************************
 レスポンシブデザイン用のメディアクエリ
************************************************************************************************************************************************/
/* =============================
 1023px以下
============================= */
@media screen and (max-width: 1023px){

		    .pc {
        display: block !important;
    }
	
}

/* =============================
  834px以下
============================= */
@media screen and (max-width: 770px){
  
	    .sp {
        display: block !important;
    }

	
	
}

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

}