@charset "utf-8";
@import url(normalize.css);
@import url(../_plugin/fontawesome/css/all.min.css);
@import url(https://unpkg.com/aos@next/dist/aos.css);
@import url(common_parts.css);
@import url(common.css);


/* 共通 ----------*/
#main { position: relative; z-index: 2; }
#main a { display: block; }
.cr_red { color: #ff366e; }
.bgc_red { background: #E33E5F; }
.bgc_gre { background: #1CB954; }
.bgc_ora { background: #F27554; }
.bgc_blu { background: #149EFF; }
.read_more a { display: block; padding: 1rem 0; }
.arrow{ position: relative; display: inline-block; font-size: 15px; text-decoration: none; vertical-align: middle; }
.arrow::before,
.arrow::after { position: absolute; top: 0; bottom: 0; right: -1em; content: ""; margin: auto; vertical-align: middle; }
.arrow_type::after { right: -1em; width: 10px; height: 10px; border-top: 1.5px solid #fff; border-right: 1.5px solid #fff; -webkit-transform: rotate(45deg); transform: rotate(45deg); }
section .sec_inner { position: relative; z-index: 2; background: #fff; }
section h2 { margin-bottom: 3rem; font-size: 3.25rem; }
section .c_ttl { position: relative; padding: 0 0 0 2em; font-size: 2.5rem; font-weight: normal; color: #0a3289; }
section .c_ttl::before { position: absolute; top: 50%; left: 0; content: ""; display: block; width: 1em; line-height: 1; border-top: 4.5px solid #0054b4; transform: translateY(calc(-50%)); }
section .c_sub { font-size: 2.7rem; font-weight: 500; line-height: 1.3; }
.sup { position: relative; padding-left: 1em; }
.sup span { position: absolute; top: 0%; left: 0; }
@media screen and ( min-width: 1920px ) {
	#mv img, main img { width: 100%; }
}

/* mv ----------*/
#mv { margin-top: 60px; }
#mv .img_box { position: relative; width: 100%; height: 350px; overflow: hidden; }
#mv h2 { position: absolute; top: 50%; left: 2rem; font-size: 3.4rem; color: #fff; transform: translateY(-50%); }
#mv img { position: fixed; z-index: 0; top: 60px; left: 35%; width: auto; height: 350px; max-width: inherit; transform: translate(-50%, 0); }
@media screen and ( min-width: 481px ) {
	#mv h2 { left: 3rem; }
}
@media screen and ( min-width: 651px ) {
	#mv { margin-top: 100px; }
}
@media screen and ( min-width: 769px ) {
	#mv .img_box { height: auto; }
	#mv img { position: static; width: 100%; height: auto; transform: none; }	
}
@media screen and ( min-width: 981px ) {
	#mv { margin-top: 0; }
	#mv .img_box { position: relative; max-height: 450px; overflow: hidden; }
	#mv img { width: 100%; height: auto; }
}

/* about philosophy ==============================*/
/* 共通 ----------*/
#about section:not(#mv) { margin: -3rem 0; }
#about #mv + section { margin-top: 0; }
#about section .sec_inner { position: relative; z-index: 2; padding: 3rem 2rem; background: #fff; }
#about section h2.c_ttl { font-size: 3rem; line-height: 1.3; border-bottom: 1px solid #000; padding-top: 1px; }
#about section p { font-size: 1.8rem; }
#about section .c_sub { font-size: 2.7rem; line-height: 1.3; }
@media screen and ( min-width: 481px ) {
	#about section:not(#mv) { margin: -4rem 0; }
	#about #mv + section { margin-top: 0; }
	#about section .sec_inner { padding: 4rem 3rem; }
	#about section p { font-size: 2.5rem; }
}
@media screen and ( min-width: 769px ) {
	#about section h2.c_ttl { font-size: 2.65rem; }
	#about section p { font-size: 1.4rem; }
	#about section .c_sub { font-size: 2.7rem; }
}
@media screen and ( min-width: 981px ) {
	#about section:not(#mv) { padding: 4rem 0; }
	#about section .sec_inner { padding: 0 8rem; }
}
/* message */
#message ruby, #message ruby rb { vertical-align: baseline; }
#message ruby rt { font-size: 1rem; line-height: 1; }
#message .flb { display: flex; flex-flow: column-reverse; }
#message .flb .img_box { width: 100%; margin: 2rem auto; }
#message .flb .img_box p { font-size: 1.5rem; }
#message figcaption { padding-top: 3px; }
section#about_link { padding: 3rem 0; }
section#about_link .sec_inner { position: relative; background: url(../_img/about/about_mv.jpg)no-repeat; background-size: cover; }
section#about_link .sec_inner::after { position: absolute; z-index: 0; top: 0; left: 0; content: ""; display: block; width: 100%; height: 100%; background: rgba(0, 33, 86, 0.8); }
#about_link .link_btn { position: relative; z-index: 1; padding: 5rem 0; }
#about_link .link_btn .btn { width: 28rem; margin: auto; background: #fff; }
#about_link .link_btn .btn a { position: relative; padding: 2rem 2rem 2rem 4rem; font-size: 2.2rem; color: #0a3289; }
#about_link .link_btn .btn a::before { position: absolute; top: 50%; left: 0; content:""; display: block; width: 1.5em; height: 4px; border-top: 4px solid; transform: translateY(-50%); }
#about_link .link_btn .btn a::after { position: absolute; top: 50%; right: 2rem; content:"\f105"; width: 35px; height: 35px; font-family: 'Font Awesome 5 Pro'; color: #fff; text-align: center; background: #0a3289; transform: translateY(-50%); font-weight: 100; font-size: 1.8rem; line-height: 2; }
@media screen and ( min-width: 480px ) {
	#message .flb .img_box { width: 50%; }
	#about_link .link_btn .btn { width: 40rem; font-weight: bold; }
	#about_link .link_btn .btn a { padding: 3rem 2rem 3rem 5rem; }
}
@media screen and ( min-width: 768px ) {
	#message .flb { display: flex; flex-wrap: wrap; flex-flow: wrap; }
	#message .flb .text_box { width: 55%; }
	#message .flb .img_box { width: calc(45% - 2rem); margin-left: 2rem; }
	#message .flb .img_box p { font-size: 1.5rem; }
}
@media screen and ( min-width: 981px ) {
	#message .flb .text_box { width: 65%; }
	#message .flb .img_box { width: calc(35% - 4rem); margin-left: 4rem; }
}
@media screen and ( min-width: 1500px ) {
	#message .flb .text_box { width: 70%; }
	#message .flb .img_box { width: calc(30% - 4rem); }
}

/* privacy_policy ==============================*/
/* 共通 ----------*/
#privacy_policy section .sec_inner { padding: 3rem 2rem; }
#privacy_policy section h2.c_ttl { border-bottom: 1px solid #000; }
@media screen and ( min-width: 981px ) {
	#privacy_policy section .sec_inner { padding: 4rem 8rem; }
	#privacy_policy section h2.c_ttl { font-size: 2.65rem; }
	#privacy_policy section p { font-size: 1.4rem; }
}
/* signature ----------*/
#privacy_policy .signature { padding: 0 2rem; text-align: right; margin-bottom: 3rem; }
#privacy_policy .signature ul { display: inline-block; margin-right: 0; }
@media screen and ( min-width: 981px ) {
	#privacy_policy .signature { margin-bottom: 6rem; text-align: right; }
	#privacy_policy .signature ul { margin-right: 8rem; }
}

/* blog */
#blog section h2.c_ttl { border-bottom: 1px solid #000; }
#blog #info { padding: 4rem 2rem 0; margin: 0 0 5rem; background: #fff; position: relative; z-index: 2; }
#blog #info li { border-bottom: 1px solid; }
#blog #info .cat { margin: 0; }
#blog #info .cat span { padding: 0.5rem; color: #fff; font-size: 1.2rem; }
@media screen and ( min-width: 650px ) {
	#blog #info { padding: 4rem 5rem 0; }
}