@charset "UTF-8";


/* screens smaller than 690---------------------------------------------------------- */
@media only screen and (max-width:690px) {



a[href^="tel:"] {
	pointer-events: auto;
	color: #0093a0;
	text-decoration: underline;
}



/*main {
	padding: 8% 0 0 0;
}*/



/* header */
/*------------------------------------------------------------------------------*/
header {
	width: 100%;
	border-top: none;
}

#header_nav {
	display: none;
}

#header__main {
	width: 100%;
	padding-top: 7%;
}
.beginner_bg #header__main {
	padding-bottom: 6%;
}
.pro_bg #header__main {
	padding-bottom: 6%;
}
.eco_bg #header__main {
	padding-bottom: 6%;
}

#header_nav02 {
	width: 100%;
	padding: 0 6% 6% 6%;
}
#header_nav02 > h2 {
	display: block;
	font-size: 4vw;
	font-weight: bold;
	color: #35a765;
	text-align: center;
	margin-bottom: 0.2em;
}
#header_nav02 > ul {
	display: block;
	border-bottom: 1px solid #cdcdcd;
}
#header_nav02 > ul > li {
	text-align: center;
	border-left: none;
	border-top: 1px solid #cdcdcd;
	padding: 0 5px;
}
#header_nav02 > ul > li:last-of-type {
	border-right: none;
}
#header_nav02 > ul > li > a {
	display: inline-block;
	width: 14em;
	font-size: 3.8vw;
	color: #333;
	text-align: left;
	padding: 0.2em 0;
}
#header_nav02 > ul > li > a:hover {
	color: #333;
	background-color: #fff;
}
#header_nav02 > ul > li > a > i {
	display: inline-block;
}
#header_nav02 > ul > li > a > span {
	display: inline;
}





/* category__title */
/*------------------------------------------------------------------------------*/
#category__title {
	padding-top: 6%;
}
#category__title > .inner {
	width: 100%;
	height: auto;
}
#category__title > .inner > .circle {
	font-size: 2.6vw;
	line-height: 1;
}
#category__title > .inner > .text01,
#category__title > .inner > .text02 {
	font-weight: bold;
	line-height: 1;
	color: #fff;
}
#category__title > .inner > .text01 {
	font-size: 5.4vw;
}
#category__title > .inner > .text02 {
	font-size: 4.4vw;
}
#category__title.econyan > .inner > .text01 {
	text-align: center;
	line-height: 1.2;
}
#category__title.econyan > .inner > .text01 > span {
	font-size: 5vw;
}
#category__title.econyan > .inner > .text01 > br {
	display: block;
}





/* common__header__img */
/*------------------------------------------------------------------------------*/
#common__header__img {
	width: 100%;
	height: 0px;
	background: url('../images/top_obi_bg_sp.png') no-repeat bottom center;
	background-size: cover;
	padding-top: 18%;
}
#common__header__img.common_bg {
	height: 0px;
	background: url('../images/common_obi_bg_sp.png') no-repeat bottom center;
	background-size: cover;
	padding-top: 15%;
	margin-bottom: 6%;
}
#common__header__img > h1 {
	width: 18%;
	position: absolute;
	top: 15%;
	left: 1%;
/*	-webkit-transform: translateY(-73%) translateX(0%);
	transform: translateY(-73%) translateX(0%);*/
}
#common__header__img > p {
	font-size: 3.7vw;
	position: absolute;
	top: 25%;
	right: 1%;
/*	-webkit-transform: translateY(-73%) translateX(0%);
	transform: translateY(-73%) translateX(0%);*/
}





#main__select__banner {
	width: 100%;
	margin: 0 auto 5% auto;
	padding: 0 4%;
}
#main__select__banner > ul {
	flex-wrap: wrap;
	justify-content: space-around;
}
#main__select__banner > ul > li > a > span {
	display: block;
}
#main__select__banner > ul > li+li {
	margin-left: 0;
}
#main__select__banner > ul > li.banner_box {
	width: 48%;
}
#main__select__banner > ul > li.banner_box > a {
	height: auto;
	border: 2px solid rgba(255,255,255,.5);
	border-radius: 0.2em;
	padding: 8% 0 3% 0;
}
#main__select__banner > ul > li.banner_for_beginner.banner_box > a:hover {
	background-color: #b8b2b2;
}
#main__select__banner > ul > li.banner_for_pro.banner_box > a:hover {
	background-color: #b8b2b2;
}
#main__select__banner > ul > li.banner_for_beginner.banner_box.current > a {
	background-color: #00AFEC;
}
#main__select__banner > ul > li.banner_for_beginner.banner_box.current > a:hover {
	background-color: #00AFEC;
}
#main__select__banner > ul > li.banner_for_pro.banner_box.current > a {
	background-color: #f2901c;
}
#main__select__banner > ul > li.banner_for_pro.banner_box.current > a:hover {
	background-color: #f2901c;
}
#main__select__banner > ul > li.banner_box > a > span.text01 {
	font-size: 3.8vw;
	margin-bottom: 0.3em;
}
#main__select__banner > ul > li.banner_for_pro.banner_box > a > span.text01 {
	font-size: 3.5vw;
}
#main__select__banner > ul > li.banner_box > a > span.text02 {
	font-size: 4.5vw;
	margin-bottom: 0.4em;
}
#main__select__banner > ul > li.banner_box > a > span.text03 {
	font-size: 2.8vw;
}
#main__select__banner > ul > li.banner_box > a > span.point_text {
	font-size: 3vw;
}
/*#main__select__banner > ul > li.banner_box > a > span.point_text {
	width: 4em;
	height: 4em;
	font-size: 2.4vw;
	-webkit-transform: translateY(-40%) translateX(-35%);
	transform: translateY(-40%) translateX(-35%);
}*/
#main__select__banner > ul > li.banner_box > a:hover > span.point_text {
	background-color: #948e8e;
}
#main__select__banner > ul > li.banner_box.current > a > span.point_text {
	background-color: #f33629;
}
#main__select__banner > ul > li.banner_box.current > a:hover > span.point_text {
	background-color: #f33629;
}
#main__select__banner > ul > li.banner_commentary {
	width: 55%;
	margin-top: 4%;
}
#main__select__banner > ul > li.banner_commentary > a {
	background-color: #ffa700;
}
#main__select__banner > ul > li.banner_commentary > a > img {
	width: 100%;
	height: auto;
}
#main__select__banner > ul > li.banner_commentary > a:hover > img {
	opacity: 0;
}
#main__select__banner > ul > li.banner_commentary.current > a:hover {
	opacity: 1;
}




#main__select__banner > ul > li.banner_for_questionnaire {
	width: 55%;
	height: auto;
	margin-top: 7%;
}
#main__select__banner > ul > li.banner_for_questionnaire a {
	font-size: 3.2vw;
	padding: 1.4em 0 .3em;
}
#main__select__banner > ul > li.banner_for_questionnaire a span.icon {
	width: 2em;
	height: 0;
	font-size: 1.4em;
	color: #948e8e;
	background-color: #fff;
	border: 2px solid #948e8e;
	line-height: 1;
	background-color: #fff;
	border-radius: 100%;
	padding-top: calc(2em - 4px);
	position: absolute;
	top: 0;
	left: 50%;
	-webkit-transform: translateY(-60%) translateX(-50%);
	transform: translateY(-60%) translateX(-50%);
}
#main__select__banner > ul > li.banner_for_questionnaire a:hover,
#main__select__banner > ul > li.banner_for_questionnaire.current a {
	background-color: #59b3c1;
	border: 2px solid #3a98ad;
}
#main__select__banner > ul > li.banner_for_questionnaire a:hover span.icon,
#main__select__banner > ul > li.banner_for_questionnaire.current a span.icon {
	color: #3a98ad;
	border: 2px solid #3a98ad;
}
#main__select__banner > ul > li.banner_for_questionnaire a span {
	text-align: center;
}
#main__select__banner > ul > li.banner_for_questionnaire a span.small {
	font-size: .8em;
}
#main__select__banner > ul > li.banner_for_questionnaire a span.icon i {
	position: absolute;
	top: 50%;
	left: 50%;
	-webkit-transform: translateY(-50%) translateX(-50%);
	transform: translateY(-50%) translateX(-50%);
}





/* 20230227〜 変更 */
.main__select__banner {
	margin-bottom: 4%
}
.main__select__banner .select__banner__main {
	flex-wrap: wrap;
	justify-content: center;
	padding: 0 3%;
}
.main__select__banner .select__banner__main .select__banner__box {
	width: calc(100% / 2);
	padding: 1.5%;
}
.main__select__banner .select__banner__main .select__banner__box.box__half {
	width: calc((100% / 2) / 1.6);
}
.main__select__banner .select__banner__main .select__banner__box > a {
	font-size: 3.5vw;
}

.main__select__banner .select__banner__main .select__banner__box.main__contents > a.current:hover .inner .point__text {
	background-color: #d61417;
}
.main__select__banner .select__banner__main .select__banner__box.main__contents.beginner > a.current:hover .inner {
	background-color: #00AFEC;
}
.main__select__banner .select__banner__main .select__banner__box.main__contents.pro > a.current:hover .inner {
	background-color: #f2901c;
}


.main__select__banner .select__banner__main .select__banner__box.youtube > a:hover .inner {
	background-color: #ffff5c;
}


.main__select__banner .select__banner__main .select__banner__box.column > a:hover .inner {
	background-color: #88b923;
}


.main__select__banner .select__banner__main .select__banner__box.questionnaire > a .inner {
	font-size: 1.25em;
}
.main__select__banner .select__banner__main .select__banner__box.questionnaire > a:hover .inner {
	background-color: #1281d6;
}





/* footer */
/*------------------------------------------------------------------------------*/
footer .page__top__area > .inner {
	width: 100%;
	padding: 4% 3% 4% 0;
}
footer .page__top__area > .inner > a.pageSlide {
	font-size: 3vw;
}
footer .page__top__area > .inner > a.pageSlide:hover {
	background-color: #fff;
}

footer .page__top__area > .inner > a.top_link_banner {
	width: 30%;
	left: 2%;
}
footer .page__top__area > .inner > a.top_link_banner > img {
	width: 100%;
	height: auto;
}

footer .animation__movie__banner {
	display: block;
	background-color: #fff;
	padding: 0 3% 4% 3%;
}
footer .animation__movie__banner > h2 {
	display: block;
	font-size: 4vw;
	font-weight: bold;
	color: #35a765;
	text-align: center;
	border-bottom: 1px solid #ccc;
	margin-bottom: 3%;
}
footer .animation__movie__banner > ul {
	display: flex;
	justify-content: space-around;
	padding: 0 3%;
}
footer .animation__movie__banner > ul > li {
	width: 42%;
}
footer .animation__movie__banner > ul > li > a {
	display: block
}
footer .animation__movie__banner > ul > li > a > img {
	width: 100%;
	height: auto;
}

footer .footer__sub__nav {
	display: block;
	padding: 0 5%;
}
footer .footer__sub__nav > ul {
	display: flex;
	flex-wrap: wrap;
	justify-content: space-around;
	border-bottom: 2px solid #fff;
	padding: 5% 3% 2% 3%;
}
footer .footer__sub__nav > ul > li > a {
	font-size: 3.8vw;
	color: #fff;
	text-decoration: none;
}

footer > .inner {
	display: block;
	width: 100%;
	padding: 4% 15% 3% 15%;
}
footer > .inner > .footer_logo__area {
	width: 100%;
}
footer > .inner > .footer_logo__area > h2 {
	text-align: center;
	margin-bottom: 2%;
}
footer > .inner > .footer_logo__area > h2 > a {
	display: inline-block;
	width: 50%;
}
footer > .inner > .footer_logo__area > h2 > a > img {
	width: 100%;
	height: auto;
}
footer > .inner > .footer_logo__area > p.text {
	margin-bottom: 5%;
}
footer > .inner > .footer_logo__area > p.text > span {
	font-size: 2.6vw;
	padding: 0 0.5em;
}
footer > .inner > .footer_logo__area > .footer__contact_area {
	margin-bottom: 6%;
}
footer > .inner > .footer_logo__area > .footer__contact_area > h3 {
	font-size: 4vw;
}
footer > .inner > .footer_logo__area > .footer__contact_area > ul > li+li {
	margin-top: 2%;
}
footer > .inner > .footer_logo__area > .footer__contact_area > ul > li > span.text {
	font-size: 4vw;
}
footer > .inner > .footer_logo__area > .footer__contact_area > ul > li > span.num {
	font-size: 5.5vw;
}
footer > .inner > .footer_logo__area > .footer__contact_area > ul > li > span > a {
	color: #fff;
	text-decoration: none;
}
footer > .inner > .footer_logo__area > .kensankyo_link {
	text-align: center;
	background-color: #efe589;
	padding: 10px 0;
}
footer > .inner > .footer_logo__area > .kensankyo_link > h3 > span {
	display: block;
	color: #00793e;
	line-height: 1.4;
}
footer > .inner > .footer_logo__area > .kensankyo_link > h3 > span:nth-of-type(1) {
	font-size: 3.4vw;
}
footer > .inner > .footer_logo__area > .kensankyo_link > h3 > span:nth-of-type(2) {
	font-size: 4.6vw;
}
footer > .inner > .footer_logo__area > .kensankyo_link > h3 > span:nth-of-type(3) {
	font-size: 3.4vw;
}
footer > .inner > .footer_logo__area > .kensankyo_link > p > a {
	font-size: 4vw;
}
footer > .inner > .footer_logo__area > .kensankyo_link > p > a:hover {
	color: #00793e;
}
footer > .inner > .footer_logo__area > p.copy {
	font-size: 3vw;
}

footer > .inner > .footer__nav__area {
	display: none;
}





/* common__main__contents */
/*------------------------------------------------------------------------------*/
.common__main__contents {
	width: 100%;
	padding: 6% 3% 0 3%;
}
.common__main__contents02 {
	width: 100%;
	padding: 3%;
}
.common__main__contents03 {
	min-width: 100%;
	margin: 0 auto;
	padding-top: 6%;
}
.common__main__contents04 {
	min-width: 100%;
}

.common__contents__section {
	width: 100%;
}
.common__contents__section+.common__contents__section {
	margin-top: 6%;
}

.common__contents__section02 {
	width: 100%;
	margin: 0 auto;
	padding: 0 2%;
}

.info_text {
	font-size: 2.8vw;
	padding-top: 5%;
}





.img__layout__type02 {
	display: block;
	padding: 6%;
}
.img__layout__type02 > .img_box {
	width: 100%;
}
.img__layout__type02 > .img_box+.img_box {
	margin-top: 3%;
}

#shading .img__layout__type02 + .link_area {
	padding: padding: 2% 3%;
}
#shading .img__layout__type02 + .link_area > dl {
	display: block;
}
#shading .img__layout__type02 + .link_area > dl > dt,
#shading .img__layout__type02 + .link_area > dl > dd {
	font-size: 3vw;
	line-height: 1.4;
}
#shading .img__layout__type02 + .link_area > dl > dt {
	margin-right: 0;
}
#shading .img__layout__type02 + .link_area > dl > dd > a:hover {
	color: #FF8100;
}





.list_li_type01 li {
	font-size: 3vw;
}
.list_li_type01 li:before {
	content: "";
	display: inline-block;
	width: 3px;
	height: 3px;
	background-color: #000;
	position: absolute;
	top: .6em;
	left: 0;
}





/* subtitle */
/*------------------------------------------------------------------------------*/
.subtitle02 {
	font-size: 4.2vw;
	font-weight: bold;
	color: #008241;
	line-height: 1;
}
.subtitle02:after {
	content: "";
	display: block;
	height: 2px;
	background-color: #747171;
	background-image: -webkit-gradient(linear, 0 0, 100% 100%,color-stop(.25, #F9F9F9), color-stop(.25, transparent),color-stop(.5, transparent), color-stop(.5, #F9F9F9),color-stop(.75, #F9F9F9), color-stop(.75, transparent),to(transparent));
	-webkit-background-size: 2px 2px;
	margin-top: 0.4rem;
}



.subtitle02_02 {
	font-weight: bold;
	color: #fff;
	line-height: 1;
	background-color: #E60012;
	padding: .5em;
}
.subtitle02_02 > span {
	display: block;
}
.subtitle02_02 > span.sub {
	font-size: 3.2vw;
	margin-bottom: 2%;
}
.subtitle02_02 > span.main {
	font-size: 4vw;
}



.subtitle04 {
	font-weight: bold;
	position: relative;
}
.subtitle04:before {
	content: "●";
	display: inline-block;
}



.title_type01 > span.num {
	font-size: 2.6vw;
}
.title_type01 > span.text {
	font-size: 3.6vw;
}



.title_area.basic_margin {
	margin-bottom: 3%;
}



.cons_example_title > span {
	display: inline-block;
	font-size: 4vw;
	font-weight: bold;
	color: #fff;
	line-height: 1;
	margin-bottom: 10px;
	padding: .4em 1.3em .4em .8em;
	position: relative;
	-webkit-transform: translateY(0%) translateX(-5%);
	transform: translateY(0%) translateX(-5%);
}
.cons_example_title > span::before {
	content: "";
	position: absolute;
	top: 0;
	right: 0;
	bottom: 0;
	left: 0;
	z-index: -1;
	background-color: #71ba2a;
	transform: scaleY(1.15) perspective(.6em) rotateX(2deg);
	transform-origin: bottom left;
}



#common__page__title01 {
	width: 100%;
	margin-bottom: 3%;
}
#common__page__title01 > h1 {
	font-size: 5.8vw;
	padding-bottom: .3em;
}


#common__page__title02 {
	width: 100%;
	margin-bottom: 3%;
}
#common__page__title02 > h1 > span {
	font-size: 4vw;
}


#common__page__title03 {
	width: 100%;
}
#common__page__title03 > h1 {
	display: block;
}
#common__page__title03 > h1 > span {
	display: block;
	text-align: center;
}
#common__page__title03 > h1 > span.main {
	font-size: 6.5vw;
	margin-bottom: .3em;
}
#common__page__title03 > h1 > span.sub {
	font-size: 3.5vw;
	padding-left: 0;
}


#common__page__title04 {
	width: 100%;
}
#common__page__title04 > h1 {
	display: block;
}
#common__page__title04 > h1 > span {
	display: block;
	text-align: center;
}
#common__page__title04 > h1 > span.main {
	font-size: 6.5vw;
	margin-bottom: .3em;
}
#common__page__title04 > h1 > span.sub {
	font-size: 3.5vw;
	padding-left: 0;
}




}
/* ---------------------------------------------------------------------------------- */