@charset "utf-8";


/*---------------------------------------------------------------------------
テンプレート名に「_slide_」とついているタンプでのみ使用。写真たちが動くトップメイン用のアニメーション。
---------------------------------------------------------------------------*/

/*トップページのスライドショーのキーフレーム設定
---------------------------------------------------------------------------*/
@keyframes slide1 {
	0% {opacity: 1;}
	25%{opacity: 1;}
	35%{opacity: 0;}
	90% {opacity: 0;}
	100% {opacity: 1;}
}
@keyframes slide2 {
	0% {opacity: 0;}
	25% {opacity: 0;}
	35% {opacity: 1;}
	60% {opacity: 1;}
	70% {opacity: 0;}
	100% {opacity: 0;}
}
@keyframes slide3 {
	0% {opacity: 0;}
	60% {opacity: 0;}
	70% {opacity: 1;}
	90% {opacity: 1;}
	100% {opacity: 0;}
}

/*スライドショー（cssでのbackground使用）
ここでは、10:5.5の画像比率（5.5÷10=0.55）を読み込む指定を行なっています。
異なる画像比率にしたい場合、.mainimgのpadding-topの数字を変更します。2:1にするなら50%です。
---------------------------------------------------------------------------*/
/*3枚の画像を囲むブロック*/
.home header {
	width: 100%;
	height: 0;
	padding-top: 55%;	/*アスペクト比を調整するところです*/
	position: relative;
	overflow: hidden;
}

/*共通設定（ここは変更不要）*/
.home header .slide1, .home header .slide2, .home header .slide3, .no-slide, .dot {
	width: 100%;height: 100%;
	position: absolute;right: 0px;top: 0px;z-index: -1;
	text-indent: -9999px;
}

/*１枚目画像*/
.home header .slide1 {
	animation: slide1 15s linear infinite, opa1 1s linear;	/*「15s（※15秒）」というのがスライドショー全体にかける時間です。slide1、slide2、slide3全てで同じ数字を設定して下さい。*/
	background: url(../images/1.jpg) no-repeat center center/cover;	/*１枚目の背景画像の読み込み*/
}

/*２枚目画像*/
.home header .slide2 {
	animation: slide2 15s linear infinite;	/*「15s（※15秒）」というのがスライドショー全体にかける時間です。slide1、slide2、slide3全てで同じ数字を設定して下さい。*/
	background: url(../images/2.jpg) no-repeat center center/cover;	/*２枚目の背景画像の読み込み*/
}

/*３枚目画像*/
.home header .slide3 {
	animation: slide3 15s linear infinite;	/*「15s（※15秒）」というのがスライドショー全体にかける時間です。slide1、slide2、slide3全てで同じ数字を設定して下さい。*/
	background: url(../images/3.jpg) no-repeat center center/cover;	/*３枚目の背景画像の読み込み*/
}

/*固定画像で使う場合*/
.home header .no-slide {
	background: url(https://www.dougudou.net/wp-content/uploads/2025/11/main-visual.jpg) no-repeat center center/cover;	/*背景画像の読み込み*/
}

/*画像の上に重ねる暗いドット*/
.dot {
	background: radial-gradient(rgba(0,0,0,0.7) 0.7px, rgba(0,0,0,0.5) 0.7px);	/*0,0,0,0.8はドットの色。0,0,0,0.5は背景の色。0,0,0は黒色で、最後の小数点はそれぞれ透明度。*/
	background-size: 2px 2px;	/*ドットの間の余白*/
}

/*画面幅 480px以下の設定
--------------------------------------------------*/
@media screen and (max-width:480px){
    .home header {
        padding-top: 100%;
    }
    
    .home header .no-slide {
	    background: url(https://www.dougudou.net/wp-content/uploads/2025/11/main-visual_s.jpg) no-repeat center center/cover;
    }
}


/*---------------------------------------------------------------------------
テンプレート名に「_photo_」とついているタンプでのみ使用。写真たちが動くトップメイン用のアニメーション。
---------------------------------------------------------------------------*/

/*キーフレーム。ここの30degはアニメーションスタート時の全体にかかっている回転角度。最終的な写真の回転角度は、下の各idの設定内にあります。*/
@keyframes thumb-photo1 {
	0% {opacity: 0;transform: rotate(30deg);}
	60% {opacity: 0;}
	100% {opacity: 1;}
}

/*画像共通*/
#thumb-photo img {
	position: absolute;
	left: 50%;
	top: 50%;
	width: 30%;	/*各画像の幅*/
	transform-origin: center center;
	padding: 0.08%;		/*写真の縁にあたる部分*/
	background: #fff;	/*縁の部分の色*/
	box-shadow: 5px 5px 10px rgba(0,0,0,0.3);	/*写真につける影。右へ、下へ、ぼかし幅。0,0,0は黒のことで0.3は色が30%出た状態。*/
}

/*#thumb-photo内にある「１枚目」の写真*/
#thumb-photo img:nth-of-type(1) {
	animation: thumb-photo1 1.5s 1s both;	/*1.5sはアニメーションにかける時間(秒)。1sは待機時間(秒)。*/
	transform: translate(-160%, -170%) rotate(-10deg);	/*translateは配置場所。rotateは回転角度。お好みで調整して下さい。*/
}

/*#thumb-photo内にある「２枚目」の写真*/
#thumb-photo img:nth-of-type(2) {
	animation: thumb-photo1 1.5s 1.2s both;	/*1.5sはアニメーションにかける時間(秒)。1.2sは待機時間(秒)。*/
	transform: translate(-50%, -170%) rotate(5deg);	/*translateは配置場所。rotateは回転角度。お好みで調整して下さい。*/
}

/*#thumb-photo内にある「３枚目」の写真*/
#thumb-photo img:nth-of-type(3) {
	animation: thumb-photo1 1.5s 1.4s both;	/*1.5sはアニメーションにかける時間(秒)。1.4sは待機時間(秒)。*/
	transform: translate(60%, -160%) rotate(15deg);	/*translateは配置場所。rotateは回転角度。お好みで調整して下さい。*/
}

/*#thumb-photo内にある「４枚目」の写真*/
#thumb-photo img:nth-of-type(4) {
	animation: thumb-photo1 1.5s 1.6s both;	/*1.5sはアニメーションにかける時間(秒)。1.6sは待機時間(秒)。*/
	transform: translate(70%, -50%) rotate(-10deg);	/*translateは配置場所。rotateは回転角度。お好みで調整して下さい。*/
}

/*#thumb-photo内にある「５枚目」の写真*/
#thumb-photo img:nth-of-type(5) {
	animation: thumb-photo1 1.5s 1.8s both;	/*1.5sはアニメーションにかける時間(秒)。1.8sは待機時間(秒)。*/
	transform: translate(60%, 70%) rotate(15deg);	/*translateは配置場所。rotateは回転角度。お好みで調整して下さい。*/
}

/*#thumb-photo内にある「６枚目」の写真*/
#thumb-photo img:nth-of-type(6) {
	animation: thumb-photo1 1.5s 2s both;	/*1.5sはアニメーションにかける時間(秒)。2sは待機時間(秒)。*/
	transform: translate(-50%, 75%) rotate(-5deg);	/*translateは配置場所。rotateは回転角度。お好みで調整して下さい。*/
}

/*#thumb-photo内にある「７枚目」の写真*/
#thumb-photo img:nth-of-type(7) {
	animation: thumb-photo1 1.5s 2.2s both;	/*1.5sはアニメーションにかける時間(秒)。2.2sは待機時間(秒)。*/
	transform: translate(-160%, 75%) rotate(-12deg);	/*translateは配置場所。rotateは回転角度。お好みで調整して下さい。*/
}

/*#thumb-photo内にある「８枚目」の写真*/
#thumb-photo img:nth-of-type(8) {
	animation: thumb-photo1 1.5s 2.4s both;	/*1.5sはアニメーションにかける時間(秒)。2.4sは待機時間(秒)。*/
	transform: translate(-170%, -50%) rotate(5deg);	/*translateは配置場所。rotateは回転角度。お好みで調整して下さい。*/
}

/*画面幅 480px以下の設定
--------------------------------------------------*/
@media screen and (max-width:480px){
    #thumb-photo {
        display: none;
    }
}