@import url('https://fonts.googleapis.com/css?family=BioRhyme+Expanded');
/*全体の設定
---------------------------------------------------------------------------*/
body * {box-sizing: border-box;}

html,body {
    font-size: 14px;	/*基準となるフォントサイズ*/
    height: 100%;
    color: #FFFFFF;
}

	/*画面幅1200px以上の追加指定*/
	@media screen and (min-width:1200px) {

	html, body {
		font-size: 14px;
	}

	}/*追加指定ここまで*/

	/*画面幅1600px以上の追加指定*/
	@media screen and (min-width:1600px) {

	html, body {
		font-size: 1vw;
	}

	}/*追加指定ここまで*/


body {
    margin: 0;
    padding: 0;
    background: #000;	/*背景色*/
    line-height: 2;		/*行間*/
    letter-spacing: normal;
    max-width: none;
}
h1{
    opacity: 1;
    font-size: medium;
}
h2{
    font-family: 'Modern Antiqua', 'Noto Sans JP',serif;
    text-align: center;
    color: #797878;
    margin-top: 30px;
}
span{
    border-bottom-style: inset;
}
.c-g{color: #0DC334;}
.l {text-align: left !important;}
.c {text-align: center !important;}
.r {text-align: right !important;}
.small {font-size: 80%;}
.large {font-size: 130%; letter-spacing: 0.1em;}


/*画像全般の設定*/
img {
    border: none;
    max-width: 100%;
    height: auto;
    vertical-align: middle;
}
/*インフォ*/
#infotitl {
    margin-top: 15px;
    margin-right: 15px;
    margin-left: 15px;
    margin-bottom: 15px;
}

	/*画面幅500px以下の追加指定*/
	@media screen and (max-width:500px) {
	
	#logo {
		top: 0;			/*上からの配置場所*/
		width: 60px;	/*ロゴの幅*/
	}

	}
/*section*/
section {
    overflow-x: hidden;
    padding: var(--space-large);
    margin-left: 30px;
    margin-right: 30px;
}
/*parts-list-normal2
---------------------------------------------------------------------------*/
/*１枚目の写真*/
.parts-list-normal2.image1-parts {
    background: url("../images/1.jpg") no-repeat center center / cover;
}

/*２枚目の写真*/
.parts-list-normal2.image2-parts {
	background: url("../images/2.jpg") no-repeat center center / cover;
}

/*３枚目の写真*/
.parts-list-normal2.image3-parts {
	background: url("../images/3.jpg") no-repeat center center / cover;
}

/*4枚目の写真*/
.parts-list-normal2.image4-parts {
	background: url("../images/4.jpg") no-repeat center center / cover;
}

/*ボックス１個あたり*/
.parts-list-normal2 {
	padding: 5vw;	/*ボックス内の余白。画面幅100%＝100vwです。*/
	position: relative;
	overflow-x: hidden;
	margin-bottom: 1vw;	/*下に空けるスペース。ボックス同士の隙間です。*/
}

/*マウスオン用のアニメーション*/
.parts-list-normal2::before {
	content: "";position: absolute;top: 0;left: 0;width: 100%;height: 100%;
	background: rgba(0,0,0,0.6);		/*写真に重ねておく半透明の黒い色。0,0,0は黒のことで0.6は色が60%出た状態。*/
	transition: transform 0.5s 0.1s;	/*アニメーションの速度（0.5秒）と待機時間（0.1秒）。*/
}
.parts-list-normal2:hover::before {
	transform: translateX(100%);	/*マウスオンで半透明の黒を枠外へ出す。-100%にすると逆に移動します。*/
}

/*テキストブロック*/
.parts-list-normal2 .text-parts {
	position: relative;z-index: 1;
	width: 80%;		/*幅*/
	height: 100%;
	color: #fff;	/*文字色*/
	text-shadow: 1px 1px 2px rgba(0,0,0,0.3);	/*テキストの影。右へ、下へ、ぼかし幅、0,0,0は黒のことで0.3は色が30%出た状態。*/
}

	/*画面幅600px以上の追加指定*/
	@media screen and (min-width:600px) {

	/*テキストブロック*/
	.parts-list-normal2 .text-parts {
		width: 40%;		/*幅*/
	}

	}/*追加指定ここまで*/


/*テキストの配置場所を入れ替えたい場合のスタイル。*/
.parts-list-normal2 .text-parts.reverse-parts {
	margin-left: auto;
}

/*parts-list-normal2内のh3見出し*/
.parts-list-normal2 h3 {
	margin: 0;padding: 0;
	font-weight: normal;	/*h要素のデフォルトの太字を標準に*/
	position: relative;
	font-size: 2rem;		/*文字サイズを200%*/
	letter-spacing: 0.1rem;	/*文字間隔を少しだけ広く*/
	line-height: 1.2;		/*行間を狭くする*/
}




/*ボタン
---------------------------------------------------------------------------*/
.parts-list-normal2 .btn-parts a {
	display: block;text-decoration: none;
	padding: 0.8rem 2rem;	/*上下、左右へのボタン内の余白*/
	margin-top: 2rem;		/*ボタンの上に2文字分のスペースを空ける*/
	text-align: center;		/*テキストをセンタリング*/
	letter-spacing: 0.1em;	/*文字間隔を少しだけ広く*/
	box-shadow: 0px 10px 30px rgba(0,0,0,0.1);	/*ボタンの影。右へ、下へ、ぼかし幅、0,0,0は黒のことで0.1は色が10%出た状態*/
	color: #fff;	/*文字色*/
	border: 1px solid #fff;	/*枠線の幅、線種、色*/
}

/*マウスオン時*/
.parts-list-normal2 .btn-parts a:hover {
	letter-spacing: 0.2rem;	/*文字間隔を少し広げる*/
	box-shadow: none;		/*ボタンの影を消す*/
}
.parts-list-normal2:hover .btn-parts a {
	background: rgba(0,0,0,0.8);	/*背景色。0,0,0は黒のことで0.8は色が80%出た状態。*/
}

/*フッター設定
---------------------------------------------------------------------------*/
footer a {color: inherit;text-decoration: none;}
footer small {font-size: 100%;}

footer {
	background: #000;	/*背景色*/
	color: #fff;			/*文字色*/
	position: relative;
	font-size: 0.85rem;	/*文字サイズ85%*/
	padding: 3vw;		/*余白*/
}

	/*画面幅600px以上の追加指定*/
	@media screen and (min-width:600px) {

	footer {
		display: flex;
		justify-content: space-between;
	}

	}/*追加指定ここまで*/



/*ロゴが入ったブロック*/
footer .image {
	width: 200px;	/*ボックス幅*/
	text-align: center;	/*中身をセンタリング*/
}

	/*画面幅500px以下の追加指定*/
	@media screen and (max-width:500px) {

	footer .image {
		width: auto;	/*ボックス幅*/
	}
	footer .image img {
		width: 80px;
	}

	}/*追加指定ここまで*/

/*ロゴ*/
footer .logo {
	opacity: 0.5;	/*透明度。色を50%だけ出す設定。全部出したいならこの１行は削除。*/
}

	/*画面幅600px以上の追加指定*/
	@media screen and (min-width:600px) {

	footer .text {
		display: flex;	/*CompanyとFollow Usを横並びにする*/
		gap: 5rem;	/*CompanyとFollow Usの間の余白。５文字分。*/
	}

	}/*追加指定ここまで*/


/*h4見出し（CompanyとFollow Usのテキスト部分*/
footer h4 {
	font-weight: 200;	/*太さを細くする*/
	font-size: 1.2rem;	/*文字サイズを120%*/
}
/*フッター内にあるソーシャルメディアのアイコン
---------------------------------------------------------------------------*/
.icons {
	list-style: none;
	margin: 0;padding: 0;
	display: flex;
	align-self: center;
	gap: 1rem;	/*アイコン同士のマージン的な要素。１文字分。*/
}
.icons i {
	font-size: 30px;	/*アイコンサイズ*/
}
/*その他の設定*/
.small {font-size: 0.75em;}
.large {
    font-size: 2em;
    letter-spacing: 0.1%;
}
.color-check, .color-check a {color: #F775DD !important;}
@media (min-width: 500px) {
a[href^="tel:"] {
    pointer-events: none;
    cursor: default;
}
}