@charset "utf-8";
@import url('https://fonts.googleapis.com/css2?family=Noto+Sans+JP:wght@400;700&display=swap');

/*--------------------------------

	overwrite

---------------------------------*/
@media screen and (max-width: 767px) {
	body.introduction #header .breadcrumb { margin-bottom: 0; }
}

body.introduction { font-family: 'Noto Sans JP', sans-serif; }
#introduction { text-align: center; }
#introduction .inner { width: 92.53%; margin: auto; max-width: 1020px; }

#hero img { width: 100%; }

h2 { font-size: 35px; font-weight: bold; }
h2.under_line { margin-top: 27px; padding-bottom: 24px; margin-bottom: 50px; background: url(/img/introduction/title_line.png) 50% 100% no-repeat; background-size: 128px 8px; }
.text { font-size: 18px; font-weight: bold; line-height: 1.67; }
.genre { border: #000 solid 1px; padding: 0.4em 1.5em; font-size: 14px; margin-bottom: 18px; border-radius: 6px; display: inline-block; }
.shadow { box-shadow: 0 0 16px rgba(0, 0, 0, .16); }

.info_top { padding: 70px 0; }
/*.info_top p { font-size: 18px; font-weight: bold; line-height: 1.67; }*/
.info_btm { padding: 70px 0; background-color: #FFE450; }
.info_btm ul { display: flex; flex-wrap: wrap; justify-content: space-between; }
.info_btm li { background-color: #fff; border-radius: 6px; width: 47.06%; padding: 40px 0; }
.info_btm li.w2 { width: 100%; margin-top: 50px; padding: 40px 60px 50px; }
.info_btm li .title { font-size: 20px; font-weight: bold; margin-bottom: 30px; text-align: center; }
.info_btm li img { margin-bottom: 20px; }
.info_btm li p { font-size: 16px; line-height: 1.75; margin-bottom: 1em; width: 87.5%; margin: auto; text-align: left; }
.info_btm li ul { justify-content: center; }
.info_btm li ul li { padding: 0; width: 100%; }
.info_btm li ul li .li_inner { width: 47.06%; padding: 0 0 40px; margin: auto; }
.info_btm li ul li p { width: 100%; }
.info_btm li ul li p.li_title { font-weight: bold; font-size: 16px; text-align: center; }
#safety { padding: 70px 0; background: url(/img/introduction/bg_circle01.png) 50% 70px no-repeat; background-size: 2060px auto; }
#safety ul { display: flex; flex-wrap: wrap; justify-content: space-between; margin-bottom: 30px; }
#safety li { width: 33%; }
#safety li .title { font-size: 16px; font-weight: bold; margin-bottom: 22px; text-align: center; }
#safety ul + p { font-size: 16px; line-height: 1.88; }
#safety .text { margin-bottom: 50px; }
#safety .btn_arrow { margin-top: 60px; }
#convenient { padding: 70px 0; background: url(/img/introduction/bg_circle02.png) 50% 300px no-repeat; background-size: 700px auto; }
#convenient .text { margin-bottom: 110px; }
#convenient ul { display: flex; flex-wrap: wrap; justify-content: space-between; margin-bottom: 30px; }
#convenient li { width: 47.06%; background-color: #fff; border: #EBEBEB solid 2px; border-radius: 6px; padding: 30px 0 55px; }
#convenient li .title { font-size: 20px; font-weight: bold; margin-bottom: 30px; text-align: center; line-height: 1.5; height: 2em; display: flex; align-items: center; justify-content: center; }
#convenient li img { margin-bottom: 30px; }
#convenient li img + p { font-size: 16px; line-height: 1.75;width: 87.5%; margin: auto; text-align: left; }
#brands { padding: 70px 0; }
#brands .brand_title { padding: 45px 0; margin-bottom: 70px; }
#brands .brand_title span { font-size: 16px; display: block; text-align: center; color: #fff; margin-top: 1em; font-weight: normal; letter-spacing: 0.1em; }
#brands .aojoy .brand_title { background-color: #002059; }
#brands .aojoy .brand_title img { width: 224px; }
#brands .akajoy .brand_title { background-color: #C21632; }
#brands .akajoy .brand_title img { width: 339px; }
#brands .yoga .brand_title { background-color: #007880; }
#brands .yoga .brand_title img { width: 438px; }
#brands .joyplus .brand_title { background-color: #000; }
#brands .joyplus .brand_title img { width: 274px; }
#brands ul.brand_lists { display: flex; flex-wrap: wrap; justify-content: space-between; }
#brands ul.btn_wrap { display: flex; flex-wrap: wrap; justify-content: center; margin: 50px auto 100px; }
#brands ul.btn_wrap li { margin: 0 12px; }
#brands ul.brand_lists li { width: 47%; margin-bottom: 66px; }
#brands ul.brand_lists li:nth-child(n + 2) { margin-bottom: 0; }
#brands .joyplus ul.brand_lists li { width: 33%; }
#brands .joyplus ul.brand_lists .btn_arrow { margin-top: 27px; }
#brands li img { margin-bottom: 30px; }
#brands li .title { font-size: 20px; font-weight: bold; margin-bottom: 30px; }
#brands li:nth-of-type(2) .title { margin-bottom: 35px; }
#brands li:nth-of-type(3) .title { margin-bottom: 31px; }
#brands li .title + p { font-size: 16px; line-height: 1.88; text-align: left; }
#brands .joyplus li .title + p { text-align: center; }
#brands li .title img { margin: 0; }

.func_hiit .title img { width: 134px; }
.mashcycle .title img { width: 178px; }
.ems .title img { width: 200px; }

.btn_arrow { font-size: 16px; min-width: 116px; font-weight: bold; display: inline-block; padding: 1em 3em 1em 2em; background: #E60012; box-shadow: 2px 2px 0 rgba(0, 0, 0, .16); border-radius: 6px; color: #fff; position: relative; margin-top: 1em; }
.btn_arrow:after { content: ''; display: block; width: 7px; height: 7px; border-top: #fff solid 3px; border-right: #fff solid 3px; position: absolute; top: 50%; right: 20px; transform: rotate(45deg) translate(-50%, -20%); }

.btn_arrow.orange { background-color: #FFA400; }
.btn_arrow.blue { background-color: #002059; }
.btn_arrow.red { background-color: #C21632; }
.btn_arrow.green { background-color: #007880; }
.btn_arrow.black { background-color: #000; }

.is__pc { display: block; }
.is__sp { display: none; }
.is__pc--inline { display: inline; } 

#brands .joyplus .brand_lists { justify-content: center; }

@media screen and (max-width: 768px){
	.is__pc { display: none; }
	.is__pc--inline { display: none; }
	.is__sp { display: block; }

	h2 { font-size: 20px; }
	h2.under_line { background-size: 100px auto; margin-bottom: 30px; }

	.text { font-size: 14px; }
	.info_top { padding: 36px 0 60px; }
	.info_btm { padding: 30px 0 65px; }
	.info_btm li { width: 100%; margin-bottom: 20px; padding: 30px 0 36px; }
	.info_btm li.w2 { padding: 30px 0; margin-top: 0; }
	.btn_arrow { width: calc(84vw - 4em); font-size: 15px; margin-top: 20px; }
	.info_btm .btn_arrow { width: calc(77vw - 4em); }
	.info_btm li ul li { padding: 0 5vw; width: calc(100% - 10vw); }
	.info_btm li .title { margin-top: 20px; margin-bottom: 20px; }
	.info_btm li ul li p.li_title { font-size: 11px; }
	/*.info_btm li ul li .btn_arrow { width: calc(80vw - 4em); }*/
	.info_btm li p { font-size: 14px; }
	.info_btm li ul li .li_inner { width: 100%; padding: 0 0 40px; margin: auto; }

	.genre { font-size: 12px; margin-bottom: 0; padding: 0.5em 1.5em; }
	
	#safety ul { margin-bottom: 20px; }
	#safety li { width: 100%; margin-bottom: 20px; }
	#safety li:last-child { margin-bottom: 0; }
	#safety li .title { margin-bottom: 10px; text-align: left; font-size: 12px; }
	#safety ul + p { text-align: left; font-size: 14px; }
	#safety { background: url(/img/introduction/bg_sp.png) 50% 260px no-repeat; background-size: 700px auto; padding-bottom: 100px; }
	#safety .btn_arrow { margin-top: 20px; }
	#convenient { background: url(/img/introduction/bg_sp.png) 50% 190px no-repeat; background-size: 700px auto; padding: 0 0 100px; }
	#convenient li { width: 100%; padding: 30px 0; }
	#convenient li + li { margin-top: 15px; }
	#convenient .btn_arrow { width: calc(77vw - 4em); }
	#convenient li img { margin-bottom: 20px; }
	#convenient li img + p { font-size: 14px; }

	#brands { padding: 40px 0; }
	#brands ul.brand_lists li { width: 100%; padding: 0; margin-bottom: 30px; }
	#brands .brand_title { margin-bottom: 30px; padding: 35px 0; }
	#brands .brand_title span { font-size: 11px; }
	#brands li img { margin-bottom: 15px; }
	#brands li .title { margin-bottom: 15px; }
	#brands li:nth-of-type(2) .title, #brands li:nth-of-type(3) .title { margin-bottom: 15px; }
	#brands li .title + p { text-align: left; font-size: 14px; }
	#brands .joyplus ul.brand_lists li { margin-bottom: 40px; }
	#brands ul.btn_wrap { margin-top: 0; }
	#brands .joyplus ul.btn_wrap { margin-bottom: 80px; }
	#brands .aojoy .brand_title img { width: 187px; }
	#brands .akajoy .brand_title img { width: 259px; }
	#brands .yoga .brand_title img { width: 336px; }
	#brands .joyplus .brand_title img { width: 210px; }
	#brands ul.brand_lists { flex-direction: column; }
	#brands ul.brand_lists li:nth-child(n + 2) { margin-bottom: 30px; }
	#brands .joyplus ul.brand_lists li { width: 100%; }
	#brands .joyplus li .title + p { text-align: center; }


}