@charset "utf-8";
/* index.css */

/*===============================================
●共通
===============================================*/

/* タイトルのスタイル */
.title01 {
	color: var(--colorTextMain);
	font-family: var(--fontJP);
	font-weight: 700;
	line-height: 1.5;
}
.title02 {
	color: var(--colorMain);
	font-family: var(--fontEN);
	font-weight: 500;
	letter-spacing: 0.1em;
}
.title03 {
	position: relative;
	color: var(--colorMain);
	font-family: var(--fontJP);
	font-weight: 700;
	text-align: center;
	letter-spacing: 0.1em;
}
.title03::after {
	display: block;
	content: "";
	border-top: 2px solid var(--colorMain);
	position: absolute;
}

/* メインビジュアル
---------------------------------------- */
.mv {
	margin: 0 auto;
}
.mv_inner {
	position: relative;
}
.mv_inner .logo {
	position: absolute;
}
.mv_inner .mvTextBox .mvMainTitle {
	color: #FFFFFF;
	font-size: 2.2rem;
	font-family: var(--fontJP);
	letter-spacing: 0.08em;
}
.mv_inner .mvTextBox .mvMainTitle span {
	display: inline-block;
}
.mv_inner .mvTextBox .mvSubText {
	color: #B9B9B9;
	font-size: 1.4rem;
	font-family: var(--fontJP);
	text-align: right;
}

/* contents
---------------------------------------- */
.contentsbox {
	background-color: #FFFFFF;
}
.contentsHeader {
	position: relative;
}

/* 各コンテンツの画像 */
#contents01 {background-image: url("../../images/index/img01.jpg"); }
#contents02 {background-image: url("../../images/index/img02.jpg"); }
#contents03 {background-image: url("../../images/index/img03.jpg"); }
#contents04 {background-image: url("../../images/index/img04.jpg"); }
#contents02::before {
	content: "産地：兵庫県河辺郡猪名川町上阿古谷";
	display: block;
	position: absolute;
	right: 16px;
	top: 16px;
	color: #4D5156;
}
#contents04::before {
	content: "産地：大阪府豊能郡豊能町保之谷";
	display: block;
	position: absolute;
	left: 16px;
	top: 16px;
	color: #FFFFFF;
}

.contentsbox .inner header { text-align: center;}
.contentsbox .inner header p {
	text-align: center;
	font-family: 'Noto Serif JP', serif;
	letter-spacing: 0.05em;
	position: relative;
}
.contentsbox .contentsBoxLead {
	font-family: var(--fontJP);
	font-weight: 500;
}
.contentsbox .contentsBoxLead.textColorCaution {
	font-weight: 500;
	font-family: var(--fontJP);
}
.contentsbox p {
	font-size: 1.5rem;
	letter-spacing: 0.02em;
	line-height: 2;
}
.contentsbox ul li {
	padding-left: 1em;
	text-indent: -1em;
}

/* タイトルに背景色がついたリスト */
.contentsbox dl dt {
	color: var(--colorMain);
	font-size: 1.6rem;
	font-family: var(--fontJP);
	font-weight: 700;
	line-height: 1.8;
	letter-spacing: 0.1em;
	background-color: #F1F1F1;
}
.contentsbox dl dd {
	font-size: 1.6rem;
	line-height: 1.8;
}

.contentsbox dl table th {
	font-weight: bold;
	line-height: 2;
}
.contentsbox dl table td {line-height: 2;}

/* グーグルマップ */
.googleMap iframe {
	width: 100%;
}

/* クワガタ
---------------------------------------- */
#contents02 ul li {
	padding-left: unset;
    text-indent: unset;
	list-style: disc;
	margin-left: 1.5em;
}

/* 文字カラー変更 */
#contents02 .articleWrap01 dt {
	color: var(--colorMain);
	background-color: #E0E8D5;
}
#contents02 .articleWrap01 .title03 {
	color: var(--colorMain);
}
#contents02 .articleWrap01 .title03::after {
	border-top: 2px solid var(--colorMain);
}
#contents02 .articleWrap02 dt {
	color: #38AC3D;
	background-color: #E0EFE1;
}
#contents02 .articleWrap02 .title03 {
	color: #38AC3D;
}
#contents02 .articleWrap02 .title03::after {
	border-top: 2px solid #38AC3D;
}
#contents02 .articleWrap03 dt {
	color: #756240;
	background-color: #EEE8DF;
}
#contents02 .articleWrap03 .title03 {
	color: #756240;
}
#contents02 .articleWrap03 .title03::after {
	border-top: 2px solid #756240;
}

/* 産地とクワガタ写真のコンテナ */
.stagBeetlesContainer {
	display: flex;
	align-items: flex-start;
}
.stagBeetlesContainer .areaImage .image {
	position: relative;
}
.stagBeetlesContainer .areaImage .areaName {
	position: absolute;
	right: 8px;
	bottom: 4px;
	color: #4D5156;
}
.stagBeetlesContainer .areaImage img {
	width: 100%;
	height: auto;
}

/* 飼育用品
---------------------------------------- */
.suppliesContainer {
	display: flex;
}
.suppliesContainer img {
	width: 100%;
	height: auto;
}
.suppliesContainer figure figcaption {
	text-align: center;
	font-family: var(--fontJP);
	font-weight: 600;
	line-height: 1.5;
}

/* お問合せ
---------------------------------------- */
#contents04 .telBox a {
	display: flex;
	justify-content: center;
	align-items: center;
}
#contents04 .telBox a span {
	color: var(--colorMain);
	font-family: var(--fontJP);
	font-weight: 700;
}

/*===============================================
●画面の横幅が768px以下(スマホのみ)
===============================================*/
@media screen and (max-width: 768px){
	
	/* 共通
	---------------------------------------- */
	.title01 {
		font-size: 2.4rem;
	}
	.title02 {	
		font-size: 1.2rem;
		margin-top: 8px;
	}
	.title02:after {
		width: 50px;
		bottom: 0.5em;
		left: calc(50% - 25px);
	}
	.title03 {
		font-size: 2rem;
		margin-bottom: 3.6rem;
	}
	.title03::after {
		width: 30px;
		bottom: 0;
		left: 50%;
		transform: translate(-50%, 12px);
	}
	.contentsbox .inner header {
		margin-bottom: 3.2rem;
	}
	.contentsbox .inner header p {
		font-size: 1.8rem;
		margin-bottom: 2.7rem;
	}
	
	/* メインビジュアル
	---------------------------------------- */
	.mv {
		width: 100%;
		height: 100svh;
		padding-top: 70px;
	}
	.mvWrap {
		position: relative;
		background-image: url("../../images/index/mainImgSP.jpg");
		background-repeat: no-repeat;
		background-position: center 50%;
		background-size: cover;
	}
	.mv_inner .mvTextBox {
		position: absolute;
		bottom: 20px;
		left: 16px;
		right: 16px;
	}
	.mv_inner .mvTextBox .mvMainTitle {
		margin-top: 24px;
	}
	.mv_inner .mvTextBox .mvSubText {
		margin-top: 28px;
	}

	/* SPで外枠をつくるときは、このクラスにつけてください */
	.mvSpBorder {
		position: relative;
		height: 100%;
		border: 1.5rem solid #FFFFFF;
	}
	.mv_inner .logo {
		width: 50%;
		max-width: 150px;
	}
	.mv_inner .mv_txt {
		width: auto;
		right: 3rem;
		bottom: 3rem;
	}
	.mv_inner .mv_txt h1 {
		font-size: 1.6rem;
		font-size: clamp(1rem, 4vw, 2rem);
		line-height: 1.5;
	}
	.mv_inner .mv_txt span {
		font-size: 5rem;
		font-size: clamp(1rem, 14vw, 5rem);
	}
	
	/* contents
	---------------------------------------- */
	#contents02 { background-position: top right; }
	#contents02::before {
		font-size: 1.2rem;
	}
	#contents04 { background-position: top left ; }
	#contents04::before {
		font-size: 1.2rem;
	}

	.contentsHeader {
		background-repeat: no-repeat;
		background-position: top center;
		background-size: 140% auto;
		padding-top: 35%;
	}
	.contentsbox .contentsBoxLead {
		text-align: left;
	}
	.contentsbox {
		line-height: 2.26;
	}
	.contentsbox .inner {
		padding: 3.5rem 1.5rem 7.5rem;
	}

	/* タイトルに背景色がついたリスト */
	.contentsbox dl dt {
		margin-bottom: 1.5rem;
		padding: 0.9rem 1rem 1rem 1.5rem;
	}
	.contentsbox dl dd {
		padding: 0 1.5rem;
	}
	.contentsbox dl dd:not(:last-child) {
		margin-bottom: 1.5rem;
	}
	.contentsbox dl table th {
		display: block;
		width: 100%;
	}
	.contentsbox dl table td {
		display: block;
	}
	.contentsbox dl table tr:not(:last-child) td {padding-bottom: 1.5rem;}

	/* クワガタ
	---------------------------------------- */
	#contents02 .articleWrap + .articleWrap {
		margin-top: 80px;
	}
	/* 産地とクワガタ写真のコンテナ */
	.stagBeetlesContainer {
		flex-direction: column-reverse;
		gap: 24px;
	}
	.stagBeetlesContainer .areaImage {
		width: 100%;
		margin-left: auto;
		margin-right: auto;
	}
	.stagBeetlesContainer .areaImage .areaName {
		font-size: 1.2rem;
	}

	/* 飼育用品
	---------------------------------------- */
	.suppliesContainer {
		flex-direction: column;
		gap: 40px;
	}
	.suppliesContainer figure figcaption {
		margin-top: 16px;
		margin-bottom: 10px;
		font-size: 1.8rem;
	}

	/* お問合せ
	---------------------------------------- */
	#contents04 .telBox a {
		gap: 16px;
		text-decoration: underline;
	}
	#contents04 .telBox a span {
		font-size: 2.4rem;
	}
}

/*===============================================
●画面の横幅が769px以上(PCのみ)
===============================================*/
@media screen and (min-width: 769px){
	
	/* 共通
	---------------------------------------- */
	.title01 {
		font-size: 4rem;
	}
	.title02 {	
		font-size: 1.6rem;
		margin-top: 16px;
	}
	
	.title03 {
		font-size: 2.4rem;
		margin-bottom: 3.6rem;
	}
	.title03::after {
		width: 30px;
		bottom: 0;
		left: 50%;
		transform: translate(-50%, 12px);
	}
	
	/* メインビジュアル
	---------------------------------------- */
	.mv {
		margin-inline: calc((50% - 50vw));
	}
	.mvWrap {
		height: 100vh;
		position: relative;
		background-image: url("../../images/index/mainImg.jpg");
		background-repeat: no-repeat;
		background-position: center 50%;
		background-size: cover;
	}
	.mv_inner {
		height: 100vh;
		border: 3rem solid #FFFFFF;
	}
	.mv_inner .logo {
		top: 32px;
		left: 40px;
	}
	.mv_inner .logo a {
		color: #FFFFFF;
		font-size: 3.2rem;
		font-weight: 800;
		font-family: var(--fontJP);
	}
	.mv_inner .mvTextBox {
		position: absolute;
		left: 40px;
		right: 40px;
		bottom: 24px;
	}
	.mv_inner .mvTextBox .mvMainTitle {
		margin-top: 40px;
	}
	
	/* contents
	---------------------------------------- */
	.contentsHeader {
		background-repeat: no-repeat;
		background-position: top center;
		background-size: contain;
		padding-top: 29rem;
	}
	#contents02::before { font-size: 1.4rem; }
	#contents04::before { font-size: 1.4rem; }

	.contentsbox .contentsBoxLead {
		text-align: center;
	}

	.contentsbox {
		max-width: 1100px;
		line-height: 2.26;
		margin: 0 auto;
	}
	.contentsbox .inner header {
		margin-bottom: 4rem;
	}
	.contentsbox .inner header p {
		font-size: 2.2rem;
		line-height: 1.5;
	}
	.contentsbox .contentsBoxLead {
		font-size: 1.8rem;
	}

	/* タイトルに背景色がついたリスト */
	.contentsbox dl dt {
		margin-bottom: 3rem;
		padding: 0.9rem 1rem 1rem 3rem;
	}
	.contentsbox dl dd {
		padding: 0 2.5rem;
	}
	.contentsbox dl dd:not(:last-child) {
		margin-bottom: 3rem;
	}
	.contentsbox dl table tr:not(:last-child) td {padding-bottom: 2.5rem;}
	.contentsbox dl table th {
		width: 15%;
		min-width: 150px;
	}

	/* クワガタ
	---------------------------------------- */
	#contents02 .articleWrap + .articleWrap {
		margin-top: 80px;
	}
	/* 産地とクワガタ写真のコンテナ */
	.stagBeetlesContainer {
		gap: 4.4%;
	}
	.stagBeetlesContainer .areaText {
		flex: 1;
	}
	.stagBeetlesContainer .areaImage {
		width: 42%;
	}
	.stagBeetlesContainer .areaImage .areaName {
		font-size: 1.4rem;
	}

	/* 飼育用品
	---------------------------------------- */
	.suppliesContainer {
		gap: 24px;
	}
	.suppliesContainer .suppliesBox {
		width: calc((100% - 48px) / 3);
	}
	.suppliesContainer figure figcaption {
		font-size: 2rem;
		margin-top: 32px;
		margin-bottom: 24px;
	}

	/* お問合せ
	---------------------------------------- */
	#contents04 .telBox a {
		gap: 24px;
	}
	#contents04 .telBox a span {
		font-size: 4rem;
	}
}

/*===============================================
●画面の横幅が590～900px以下(タブレット)
===============================================*/
@media screen and (min-width: 590px) and ( max-width: 1200px) {

	/* メインビジュアル
	---------------------------------------- */
	.mvWrap {
		position: relative;
		background-image: url("../../images/index/mainImgTab.jpg");
	}
	.mv_inner .mvTextBox .mvSubText {
		margin-top: px;
	}
}