@charset "utf-8";
@import url("reset.css");

html {
	background : #ffffff;
	font-family:  '游明朝',
								'Yu Mincho',
								YuMincho,
								"Helvetica Neue",
								Arial,
								"Hiragino Kaku Gothic ProN",
								"Hiragino Sans",
								Meiryo,
								sans-serif;
	font-size  : 12px;
	color      : #7B7C80;
}



@media screen and (min-width: 768px) {
body{
	/*width: 960px;*/
	margin: auto;
}
p{
	margin-left: 4vw;
	font-size  : 12px;
}
ul{
	font-size  : 16px;
}
li{
	margin-bottom: 2%;
}

li > a{
	text-decoration:none;
	height: 100%;
    width: 100%;
	display: block;

}

/*　header領域　*/
.header{
	width      : 100%;
	height     : 4vh;
	background : rgba(255,255,255,0.8);
	z-index    : 99;
	position   : fixed;
	top: 0;
}
.header-inner{
	position: relative;
}
.header.fixed {
	position: fixed;
	left: 0;
	top: 0;
}
/* このクラス付与で.header表示 */
.open{
	opacity   : 1;
	visibility: visible;
}
.logo1{
}
.header img{
	width: 10%;
	margin-left: 4%;
}



/*　ハンバーガーメニュー ボタン　*/
.hamburger {
	display: block;
	position: absolute;
	z-index: 3;
	right: 4%;
	top: 6%;
	width: 42px;
	height: 42px;
	cursor: pointer;
	text-align: center;
}
.hamburger span {
	display           : block;
	position          : absolute;
	width             : 30px;
	height            : 2px ;
	left              : 6px;
	background        : #7B7C80;
	-webkit-transition: 0.3s ease-in-out;
	-moz-transition   : 0.3s ease-in-out;
	transition        : 0.3s ease-in-out;
}
.hamburger span:nth-child(1) {
	top: 10px;
}
.hamburger span:nth-child(2) {
	top: 20px;
}
.hamburger span:nth-child(3) {
	top: 30px;
}
/* ハンバーガーメニュー スマホメニューを開いてる時のボタン */
.hamburger.active span:nth-child(1) {
	top              : 16px;
	left             : 6px;
	background       :#7B7C80;
	-webkit-transform: rotate(-45deg);
	-moz-transform   : rotate(-45deg);
	transform        : rotate(-45deg);
}
.hamburger.active span:nth-child(2),
.hamburger.active span:nth-child(3) {
	top              : 16px;
	background       :#7B7C80;
	-webkit-transform: rotate(45deg);
	-moz-transform   : rotate(45deg);
	transform        : rotate(45deg);
}
/* ハンバーガーメニュー メニュー背景　*/
nav.globalMenuSp {
	position  : fixed;
	z-index   : 2;
	top       : 0;
	left      : 0;
	color     : #7B7C80;
	background: #ffffff;
	text-align: center;
	width     : 100%;
	height    : 100%; 
	transform : translateX(100%);
	transition: all 0.6s;
}
nav.globalMenuSp ul {
	margin : 0 auto;
	padding: 0;
	width  : 100%;
}
nav.globalMenuSp ul li {
	list-style-type: none;
	padding        : 0;
	width          : 100%;
	transition     : .4s all;
}
nav.globalMenuSp ul li:last-child {
	padding-bottom: 0;
}
nav.globalMenuSp ul li:hover{
	background:#ddd;
}
nav.globalMenuSp ul li a {
	display        : block;
	color          : #7B7C80;
	padding        : 1em 0;
	text-decoration: none;
}
/* ハンバーガーメニュー クリックでjQueryで追加・削除 */
nav.globalMenuSp.active {
	opacity  : 100;
	display  : block;
	transform: translateX(0%);
}
/* ハンバーガーメニュー フェードイン/フェードアウト */
@keyframes fadeIn {
	0% {opacity: 0}
	100% {opacity: 1}
}
@-webkit-keyframes fadeIn {
	0% {opacity: 0}
	100% {opacity: 1}
}



/*　mainWrapper領域　*/
#mainWrapper{
	width : 100%
}


.navi{
	margin-top : 8vh;
	margin-left: 5vw;
}


/*　main-visual領域　*/
#main-visual {
	background-image   : url("../imgs/pc_mainVisual.jpg");
	background-position: center center;
	background-repeat  : no-repeat;
	background-size    : cover;
	height             : 100vh;
	margin-bottom      : 20vh;
	animation          : fadeIn 2s ease 0s 1 normal;
	-webkit-animation  : fadeIn 2s ease 0s 1 normal;
}


/* Scrollダウン */	
/* Scrollダウン全体の場所 */
.scrolldown1{
	position: absolute;
	left    : 50%;
	bottom  : 5%;
	height  : 5vh;
}
/* Scrollテキストの配置 */
.scrolldown1 span{
	position: absolute;
	left    : -9px;
	top     : -42px;
}
/* Scroll線の描写 */
.scrolldown1::after{
	content   : "";
	position  : absolute;
	top       : 0;
	width     : 1px;
	height    : 30px;
	background: #000000;
	animation : pathmove 1.4s ease-in-out infinite;
	opacity   :0;
}
/* Scrollダウン2全体の場所 */	
.scrolldownArea{
	position     : relative;
	margin-bottom: 40vh;
}
.scrolldown2{
	position: absolute;
	left    : 50%;
	bottom  : -16vh;
	height  : 0vh;
}
/* Scroll2テキストの描写 */
.scrolldown2 span{
	position: absolute;
	left    : -9px;
	top     : -42px;
}
/* Scroll2線の描写 */
.scrolldown2::after{
	content   : "";
	position  : absolute;
	top       : 0;
	width     : 1px;
	height    : 30px;
	background: #000000;
	animation : pathmove 1.4s ease-in-out infinite;
	opacity   :0;
}
/* Scroll線の上から下への動き */
@keyframes pathmove{
	0%{
		heigh  : 0;
		top    : 0;
		opacity: 0;
	}
	30%{
		height : 30px;
		opacity: 1;
	}
	100%{
		height : 0;
		top    : 50px;
		opacity: 0;
	}
}




.sectionWrapper{
 margin-top: 10%;
}


.blockWrapper{
 margin-bottom: 20%;
}


#catch01{
 margin-top  : 5vh;
 /* margin-right: 10vw; */
 /* margin-left : 16vw; */
 text-align  : center;
 font-size   : 32px;
}	
#catch02{
 margin-top   : 4vh;
 /* margin-left  : 26vw; */
 text-align   : center;
 margin-bottom: 8vh;
 font-size    : 32px;
}
.more{
 margin-top : 4vh;
 margin-left: 40vw;
 margin-bottom: -4vh;
}
.blockImg{
 text-align  : center;
}
.blockImg img{
 width: 40vw;
}

.blockImgRight{
	text-align  : left;
	margin-left : 8vw;
	margin-right: 8vw;
	float       : left;
}
.blockImgRight img{
	width: 40vw;
}

.blockImgCenter{
	text-align   : center;
	margin-bottom: 16vh;
}
.blockIcatch_02 img{
	width: 50%;
}
.IcatchImg{
	float     : left;
	width     : 50%;
	text-align: right;
}
.IcatchText{
	float     : left;
	width     : 50%;
	text-align: left;
}
.cb{
	clear       : both;
	margin-bottom: 8vh;
}
.eText{
	margin-top   : 4vh;
	margin-left  : 4vw;
}
.fadeInBlock {
		text-align: center;
}
.news{
	margin-top   : 4vh;
	margin-left  : 4vw;
}

/*　スライドショー */
.slide-container {
	max-width  : 100%;
	margin     : 50px auto;
	display    : flex;
	align-items: center;
	overflow   : hidden;
}
.slide-wrapper {
	display  : flex;
	animation: slide-flow 20s infinite linear 1s both;
}
.slide{
	width     : 300px;
	object-fit:cover;
	border    : 1px solid #ddd;
}
.slide-wrapper img{
	margin-right: 0.5%;
}
@keyframes slide-flow {
	0% {transform  : translateX(0);}
	100% {transform: translateX(-15%);}
}


/*　about.html */
.concept{
	margin-left    : 0;
	font-size      : 24px;
	text-align     : center;
	text-decoration:underline;
	margin-top     : 3vh;
	margin-bottom  : 3vh;
}
.about{
	margin-bottom:4vw;
}
.about p{
	text-align  : center;
	margin-right: 8vw;
	margin-left : 8vw;
	line-height : 2.5em;
}
.IcatchText p{
	text-align  : left;
	margin-right: 8vw;
	margin-left : 5vw;
	line-height : 2.5em;
}


	/*　news.html */
.newsBlock{
	margin-bottom: 8vw; 	
	margin-left  : 4vw;
}	
.newsTitle{
	font-weight  :bold;
	margin-bottom:2vw; 
}
.newsText{
	margin-right: 8vw;
	margin-left : 8vw;
	line-height : 2.5em;
}



/*　media.html */
.media{
	margin-bottom: 8vh;
	text-align   : center;
}
.mediaDate{
	margin-bottom: 1vh;
	font-size    : 16px;
}
.mediaText{
	margin-bottom: 2vh;
	font-size    : 16px;
}
.media img{
	width: 35%;
}



	/*　product.html */
#product-img{
	margin-bottom  : 8vh;
	display        : flex;
	justify-content: center;
}
#product-img img{
	width: 100%;
}
#catch03{
	margin-bottom: 4vh;
	font-size    : 16px;
}
.explanation{
	text-align   : center;
	margin-right : 8vw;
	margin-left  : 8vw;
	line-height  : 2.5em;
	margin-bottom: 4vh;
}
#product p{
	text-align   : center;
	margin-right : 8vw;
	margin-left  : 8vw;
	line-height  : 2.5em;
}	
#product{
	position: relative;
	overflow: hidden; /* ulでリスト全体を右に50%移動している分幅が広がりスクロールバーが表示されるのを防ぐ */
	margin-bottom: 8vh;
}
#product ul {
	position   : relative;
	left       : 50%; /* ulを右に50%移動 */
	float      : left;
	margin-left: -5px;
}
#product ul li {
	position    : relative;
	left        : -50%; /* 左に50%移動 */
	float       : left;
	padding     : 0 5vw;
	border-left : 1px solid #333;
	border-right: 1px solid #333;
}
#product li+ li {
	border-left : 0;
	border-right: 1px solid #333;
}
.ulWrapper{
	margin-top   : 4vh;
	margin-bottom: 4vh;
}
#subImg {
	display      : flex;
	margin       : auto;
	width        : 70%;
	margin-bottom: 8vh;
}
#subImg li{
	width: calc(100% / 3);
	text-align: center;
}
#subImg img{
	width        : 100px;
	height       : 100px;
	object-fit   :cover;
	border-radius: 50%;
}
section {
	max-width:  40%;
	margin   : 0 auto;
}
a.cta_btn {
	display            : flex;
	justify-content    : center;
	align-items        : center;
	background         : #fff;
	border             : 1px solid #787878;
	box-sizing         : border-box;
	width              : 100%;
	height             : 50px;
	padding            : 0 6% 0 12%;
	color              : #787878;
	font-size          : 16px;
	text-align         : left;
	text-decoration    : none;
	position           : relative;
	transition-duration: 0.2s;
	margin-bottom      : 8vh;
}
a.cta_btn:hover {
	background: #787878;
	color     : #fff;
}
a.cta_btn:before {
	content     : "";
	display     : inline-block;
	width       : 0;
	height      : 0;
	border-style: solid;
	border-width: 7px 0 7px 8px;
	border-color: transparent transparent transparent #787878;
	position    : absolute;
	top         : 50%;
	left        : 6%;
	margin-top  : -7px;
}
a.cta_btn:hover:before {
	border-color: transparent transparent transparent #fff;
}



/* footer */
.logo2{
	margin       : 0 auto;
	margin-bottom: 8vh;
}
.logo2 img{
	width: 15%;
}
#footer{
	text-align: center;
}
#footer ul {
	margin       : 0 auto;
	margin-bottom: 5%;
	padding      : 0;
	width        : 100%;
}
#footer ul li {
	list-style-type: none;
	padding        : 0;
	width          : 100%;
	transition     : .4s all;
}
#footer ul li a {
	display        : block;
	color          : #7B7C80;
	padding        : 1em 0;
	text-decoration:none;
}
/* snsアイコン */
.sns{
	display  : flex;
	flex-wrap:wrap;
}
.sns li {
	width     : calc(100%/3) !important;
	padding   :0 5px !important;
	box-sizing:border-box;
}
.sns li img {
	max-width:100%;
	height   : auto;
}
/* copy */
#copy{
	font      : 10px;
	text-align: center;
}

/*　qanda.html */
.qanda_title{
    margin-left: 0;
    font-size: 24px;
    text-align: center;
    text-decoration: underline;
    margin-top: 3vh;
    margin-bottom: 3vh;
}

#main_wrap{
	width: 700px;
    margin: 0 auto;
	margin-bottom: 10%;
}

ul.qa{
	margin-top: 10%;
}

.qa li{
	list-style: none;
	background-color: #aba2a2;
	color: #ffff;
    padding: 10px;
    text-align: center;
}

.qa_inside_title{
    font-size:20px;
	margin: 11% 0 0 0;
}

.qa dt{
    border-bottom: 1px solid #bfbfbf;
    padding: 2%;
}

.toggle_contents > p{
    font-size:12px;
}

.toggle_contents {
	border-bottom: 1px solid #d9d9d9;
}

.toggle_title {
	position: relative;
	padding: 15px;
	cursor: pointer;
	line-height: 1.4;
	color:#665b5b;
}

.toggle_btn {
	position: absolute;
	top: 50%;
	right: 20px;
	transform: translateY(-50%);
	background: #c8c8c8;
	display: block;
	width: 24px;
	height: 24px;
	text-indent: 100%;
	white-space: nowrap;
	overflow: hidden;
	border-radius: 50%;
}
.toggle_btn:before, .toggle_btn:after {
	display:block;
	content: '';
	background-color: #fff;
	position: absolute;
	width: 10px;
	height: 2px;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
}
.toggle_btn:before {
	width: 2px;
	height: 10px;
}
.toggle_title.selected .toggle_btn:before {
	content: normal;
}
.toggle_contents dd {
	display: none;
	margin:2%;
}

.br-sp {
	display: none;
}


}
@media screen and (max-width: 767px) {
	p{
		margin: 0 5vw;
		font-size  : 13px;
	}
	ul{
		font-size  : 14px;
	}

	.index a{
	text-decoration:none;
	color: #ffff;
	height: 100%;
    width: 100%;
	display: block;
	}

	/*　header領域　*/
	.header{
		width      : 100vw;
		height     : 8vh;
		background : rgba(255,255,255,0.8);
		z-index    : 99;
		position   : fixed;
		top: 0;
	}
	.header-inner{
		position: relative;
	}
	.header.fixed {
		position: fixed;
		left: 0;
		top: 0;
	}
	/* このクラス付与で.header表示 */
	.open{
		opacity   : 1;
		visibility: visible;
	}
	.logo1{
	}
	.header img{
		width: 25%;
		margin-left: 4%;
		margin-top: 4%;
	}



	/*　ハンバーガーメニュー ボタン　*/
	.hamburger {
    display: block;
    position: absolute;
    z-index: 3;
    right: 4%;
    top: 25%;
    width: 42px;
    height: 42px;
    cursor: pointer;
    text-align: center;
	}
	.hamburger span {
		display           : block;
		position          : absolute;
		width             : 30px;
		height            : 2px ;
		left              : 6px;
		background        : #7B7C80;
		-webkit-transition: 0.3s ease-in-out;
		-moz-transition   : 0.3s ease-in-out;
		transition        : 0.3s ease-in-out;
	}
	.hamburger span:nth-child(1) {
		top: 10px;
	}
	.hamburger span:nth-child(2) {
		top: 20px;
	}
	.hamburger span:nth-child(3) {
		top: 30px;
	}
	/* ハンバーガーメニュー スマホメニューを開いてる時のボタン */
	.hamburger.active span:nth-child(1) {
		top              : 16px;
		left             : 6px;
		background       :#7B7C80;
		-webkit-transform: rotate(-45deg);
		-moz-transform   : rotate(-45deg);
		transform        : rotate(-45deg);
	}
	.hamburger.active span:nth-child(2),
	.hamburger.active span:nth-child(3) {
		top              : 16px;
		background       :#7B7C80;
		-webkit-transform: rotate(45deg);
		-moz-transform   : rotate(45deg);
		transform        : rotate(45deg);
	}
	/* ハンバーガーメニュー メニュー背景　*/
	nav.globalMenuSp {
		position  : fixed;
		z-index   : 2;
		top       : 0;
		left      : 0;
		color     : #7B7C80;
		background: #ffffff;
		text-align: center;
		width     : 100%;
		height    : 100%; 
		transform : translateX(100%);
		transition: all 0.6s;
	}
	nav.globalMenuSp ul {
		margin     : 0 auto;
		padding    : 0;
		width      : 100%;
		margin-left: -4vw;
	}
	nav.globalMenuSp ul li {
		list-style-type: none;
		padding        : 0;
		width          : 100%;
		transition     : .4s all;
	}
	nav.globalMenuSp ul li:last-child {
		padding-bottom: 0;
	}
	nav.globalMenuSp ul li:hover{
		background:#ddd;
	}
	nav.globalMenuSp ul li a {
		display        : block;
		color          : #7B7C80;
		padding        : 1em 0;
		text-decoration: none;
	}
	/* ハンバーガーメニュー クリックでjQueryで追加・削除 */
	nav.globalMenuSp.active {
		opacity  : 100;
		display  : block;
		transform: translateX(0%);
	}
	/* ハンバーガーメニュー フェードイン/フェードアウト */
	@keyframes fadeIn {
		0% {opacity: 0}
		100% {opacity: 1}
	}
	@-webkit-keyframes fadeIn {
		0% {opacity: 0}
		100% {opacity: 1}
	}



	/*　mainWrapper領域　*/
	#mainWrapper{
		width : 100%
	}


	.navi{
		margin-top : 10vh;
	}
	

	/*　main-visual領域　*/
	#main-visual {
		background-image   : url("../imgs/sp_mainVisual.jpg");
		background-position: center center;
		background-repeat  : no-repeat;
		background-size    : cover;
		height             : 100vh;
		animation          : fadeIn 2s ease 0s 1 normal;
		-webkit-animation  : fadeIn 2s ease 0s 1 normal;
	}



	/* Scrollダウン */	
	/* Scrollダウン全体の場所 */
	.scrolldown1{
		position: absolute;
		left    : 50%;
		bottom  : 10px;
		height  : 5vh;
	}
	/* Scrollテキストの配置 */
	.scrolldown1 span{
		position: absolute;
		left    : -9px;
		top     : -42px;
	}
	/* Scroll線の描写 */
	.scrolldown1::after{
		content   : "";
		position  : absolute;
		top       : 0;
		width     : 1px;
		height    : 30px;
		background: #000000;
		animation : pathmove 1.4s ease-in-out infinite;
		opacity   :0;
	}
	/* Scrollダウン2全体の場所 */	
	.scrolldownArea{
		position     : relative;
		margin-bottom: 32vh;
	}
	.scrolldown2{
		position: absolute;
		left    : 50%;
		bottom  : -16vh;
		height  : 0vh;
	}
	/* Scroll2テキストの描写 */
	.scrolldown2 span{
		position: absolute;
		left    : -9px;
		top     : -42px;
	}
	/* Scroll2線の描写 */
	.scrolldown2::after{
		content   : "";
		position  : absolute;
		top       : 0;
		width     : 1px;
		height    : 30px;
		background: #000000;
		animation : pathmove 1.4s ease-in-out infinite;
		opacity   :0;
	}
	/* Scroll線の上から下への動き */
	@keyframes pathmove{
		0%{
			heigh  : 0;
			top    : 0;
			opacity: 0;
		}
		30%{
			height : 30px;
			opacity: 1;
		}
		100%{
			height : 0;
			top    : 50px;
			opacity: 0;
		}
	}



 .sectionWrapper{
	 margin-top: 8%;
 }



 .blockWrapper{
	 margin-bottom: 20%;
 }



/* blockWrapper領域のフェードイン制御 */
 .fadeInBlock {
	opacity            : 0;
	transition-duration: 500ms;
	transition-property: opacity, transform;
	}



	#catch01{
		margin-top : 4vh;
		margin-left: -4vw;
		text-align : center;
		font-size  : 16px;
	}	
	#catch02{
		margin-top   : 4vh;
		margin-left  : -4vw;
		text-align   : center;
		margin-bottom: 8vh;
		font-size    : 16px;
	}
	.more{
		margin-top : 4vh;
		margin-left: 64vw;
	}
	.blockImg{
		text-align: left;
	}
	.blockImg img{
		width: 100%;
	}
	
	.blockImgRight{
		text-align: right;
	}
	.blockImgRight img{
		width: 100%;
	}

	.blockImgCenter{
		text-align   : center;
		margin-bottom: 8vh;
	}
	.blockImgCenter img{
		width: 100%;
	}
	.blockIcatch img{
		width: 40%;
	}
	.blockIcatch_02 img{
		width: 100%;
	}
	.IcatchImg{
		float : left;
		width : 50%;
	}
	.IcatchText{
		float : left;
		width : 50%;
	}
	.cb{
		clear       : both;
		margin-bottom: 8vh;
	}
	.IcatchText p{
		font-size: 80%;
	}
	.eText{
		margin-top   : 4vh;
		margin-left  : 25vw;
	}
	.news{
		text-align : left;
		margin-top : 8vh;
		margin-left: 4vw;
	}
	.news li{
		margin-left  : 8vw;
		margin-bottom: 4vh;
	}


	/*　スライドショー */
	.slide-container {
		max-width  : 100%;
		margin     : 50px auto;
		display    : flex;
		align-items: center;
		overflow   : hidden;
	}
	.slide-wrapper {
		display  : flex;
		animation: slide-flow 20s infinite linear 1s both;
	}
	.slide{
		width     : 200px;
		object-fit:cover;
		border    : 1px solid #ddd;
	}
	.slide-wrapper img{
		margin-right: 0.5%;
	}
	@keyframes slide-flow {
		0% {transform  : translateX(0);}
		100% {transform: translateX(-15%);}
	}



	/*　about.html */
	.concept{
		font-size      : 16px;
		text-align     : center;
		text-decoration:underline;
		margin-top     : 3vh;
		margin-bottom  : 3vh;
		margin-left    : -8vw;
	}
	.about{
		margin-bottom:8vw; 	
	}
	.about p{
		text-align  : center;
		margin-right: 8vw;
		margin-left : 8vw;
		line-height : 2.5em;
	}
	.IcatchText p{
		text-align  : left;
		font-size   : 14px;
		margin-right: 0vw;
		margin-left : 4vw;
		line-height : 2.0em;	}


	/*　news.html */
	.newsBlock{
		margin-bottom:8vw; 	
	}
	.newsTitle{
		font-weight  :bold;
		margin-bottom:4vw; 
	}
	.newsText{
		margin-right: 8vw;
		margin-left : 8vw;
		line-height : 2.5em;
	}



	/*　media.html */
	.media{
		margin-bottom: 8vh;
		margin-left  : 8vw;
	}
	.mediaDate{
		margin-bottom: 1vh;
		font-size    : 14px;
	}
	.mediaText{
		margin-bottom: 2vh;
		font-size    : 14px;
		margin-right : 8vw;
	}
	.media img{
		width: 90%;
	}



	/*　product.html */
	#product-img{
		margin-bottom: 8vh;
	}
	#product-img img{
		width: 100%;
	}
	#catch03{
		margin-bottom: 4vh;
		font-size    : 16px;
	}
	.explanation{
		text-align   : center;
		margin-right : 8vw;
		margin-left  : 8vw;
		line-height  : 2.5em;
		margin-bottom: 4vh;
	}
	#product p{
		text-align   : center;
		margin-right : 8vw;
		margin-left  : 8vw;
		line-height  : 2.5em;
	}	
	#product{
		position: relative;
		overflow: hidden; /* ulでリスト全体を右に50%移動している分幅が広がりスクロールバーが表示されるのを防ぐ */
		margin-bottom: 8vh;
	}
	#product ul {
		position   : relative;
		left       : 50%; /* ulを右に50%移動 */
		float      : left;
		margin-left: -5px;
	}
	#product ul li {
		position    : relative;
		left        : -50%; /* 左に50%移動 */
		float       : left;
		padding     : 0 5vw;
		border-left : 1px solid #333;
		border-right: 1px solid #333;
	}
	#product li+ li {
		border-left : 0;
		border-right: 1px solid #333;
	}
	.ulWrapper{
		margin-top   : 4vh;
		margin-bottom: 4vh;
	}
	#subImg {
		display      : flex;
		margin-bottom: 8vh;
	}
	#subImg li{
		width: calc(100% / 3);
		text-align: center;
	}
	#subImg img{
		width        : 100px;
		height       : 100px;
		object-fit   :cover;
		border-radius: 50%;
	}
	p.box {
		 border-bottom: 1px solid #787878;
		 margin-bottom: 4vh;
	}
	section {
		max-width : 75%;
		margin    : 0 auto;
		margin-top: 8vh;
	}
	a.cta_btn {
		display            : flex;
		justify-content    : center;
		align-items        : center;
		background         : #fff;
		border             : 1px solid #787878;
		box-sizing         : border-box;
		width              : 100%;
		height             : 50px;
		padding            : 0 6% 0 12%;
		color              : #787878;
		font-size          : 16px;
		text-align         : left;
		text-decoration    : none;
		position           : relative;
		transition-duration: 0.2s;
		margin-bottom      : 8vh;
	}
	a.cta_btn:hover {
		background: #787878;
		color     : #fff;
	}
	a.cta_btn:before {
		content     : "";
		display     : inline-block;
		width       : 0;
		height      : 0;
		border-style: solid;
		border-width: 7px 0 7px 8px;
		border-color: transparent transparent transparent #787878;
		position    : absolute;
		top         : 50%;
		left        : 6%;
		margin-top  : -7px;
	}
	a.cta_btn:hover:before {
		border-color: transparent transparent transparent #fff;
	}



	/* footer */
	.logo2{
		margin       : 0 auto;
		margin-bottom: 8vh;
	}
	.logo2 img{
		width: 25%;
	}
	#footer{
		text-align: center;
	}
	#footer ul {
		margin       : 0 auto;
		margin-bottom: 5%;
		padding      : 0;
		width        : 100%;
	}
	#footer ul li {
		list-style-type: none;
		padding        : 0;
		width          : 100%;
		transition     : .4s all;
	}
	#footer ul li a {
		display        : block;
		color          : #7B7C80;
		padding        : 1em 0;
		text-decoration:none;
	}
	/* snsアイコン */
	.sns{
		display  : flex;
		flex-wrap:wrap;
	}
	.sns li {
		width     : calc(100%/3) !important;
		padding   :0 5px !important;
		box-sizing:border-box;
	}
	.sns li img {
		max-width:100%;
		height   : auto;
	}
	/* copy */
	#copy{
		font      : 10px;
		text-align: center;
	}


	/*　qanda.html */

	h2{
		padding: 0 3%;
	}

	.qanda_title{
    margin-left: 0;
    font-size: 24px;
    text-align: center;
    text-decoration: underline;
    margin-top: 3vh;
    margin-bottom: 3vh;
    }

	#main_wrap{
    margin: 0 auto;
	padding: 0 3%;
	margin-bottom: 10%;
    }

	ul.qa{
	margin-top: 10%;
	padding:2%;
    }

	.qa li{
	list-style: none;
	background-color: #aba2a2;
	color: #ffff;
    padding: 10px;
    text-align: center;
	margin-bottom: 2%;
    }

	.qa_inside_title{
    font-size:20px;
	margin: 15% 0 0 0;
    }

	.qa dt{
    border-bottom: 1px solid #bfbfbf;
    padding: 2%;
    }

	.toggle_contents > p{
    font-size:12px;
     }

	.toggle_contents {
	border-bottom: 1px solid #d9d9d9;
    }

	.toggle_title {
	position: relative;
	padding: 15px;
	cursor: pointer;
	line-height: 1.4;
	color:#665b5b;
    }

	.toggle_btn {
	position: absolute;
	top: 50%;
	right: 20px;
	transform: translateY(-50%);
	background: #c8c8c8;
	display: block;
	width: 24px;
	height: 24px;
	text-indent: 100%;
	white-space: nowrap;
	overflow: hidden;
	border-radius: 50%;
    }

	.toggle_btn:before, .toggle_btn:after {
	display:block;
	content: '';
	background-color: #fff;
	position: absolute;
	width: 10px;
	height: 2px;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
    }

	.toggle_btn:before {
	width: 2px;
	height: 10px;
    }

	.toggle_title.selected .toggle_btn:before {
	content: normal;
    }

	.toggle_contents dd {
	display: none;
	margin:2%;
}

}