@charset "utf-8";
/*======================================
common CSS
========================================*/
:root{
	--black_color: #333;
	--red_d_color: #A72E22;
	--red_color: #bc120b;
	--yell_color: #f1fa0f;
	--blue_color: #30a2e8;
	--green_l_color: #37A7BB;
	--section_bg: #FCF2E9;
	--shadow_color: #cd6564;
	--list_red: #F89C9C;
	--list_blue: #99BCF3;
	--list_green: #A7D990;
	--list_pink: #F5BFD4;
}

/*------------------------------
グローバルナビ
------------------------------*/
#index_header{}
#article_header{}
.header{}
#header_gnav{
	display: flex;
	justify-content: space-between;
	letter-spacing: 0.1em;
	width: 100%;
	background-color: #fff;
	box-shadow: 0 3px 5px rgba(0, 0, 0, 0.18);
	position: relative;
	z-index: 9999;
}
#index_header #header_gnav{}
#article_header #header_gnav{
	position: fixed;
	top: 0;
	left: 0;
}

#nihongo_logo{
	display: flex;
	align-items: center;
}
#nihongo_logo a{
	display: block;
	padding: 0.5em;
}
#nihongo_logo img{
	width: 100%;
}
.gnav_box{
	font-weight: bold;
}

#sp_menu{}
.gnav_area{}

.gnav_btn_area{}
.btn_for_contact{}

.btn_gnav{}
.btn_gnav a{
	display: flex;
	justify-content: center;
	align-items: center;
	text-decoration: none;
	color: var(--black_color);
	height: 100%;
}
.btn_gnav a .nav_icon{
	width: 1.43em;
	margin-right: 0.5em;
}
.btn_for_contact .btn_gnav a{
	color: #fff;
	background-image: linear-gradient(to bottom,#f769c3 0, #f121a6 100%);
}

.sub_drop{}
.sub_drop li{
	text-align: center;
}
.sub_drop li a{
	display: block;
	text-decoration: none;
	color: var(--black_color);
}

@keyframes open_top_bar {
	0% {
		top: 0;
		transform: rotateZ(0);
	}
	50% {
		top: calc(50% - 1px);
		transform: rotateZ(0);
	}
	100% {
		top: calc(50% - 1px);
		transform: rotateZ(-45deg);
	}
}
@keyframes open_bottom_bar {
	0% {
		bottom: 0;
		transform: rotateZ(0);
	}
	50% {
		bottom: calc(50% - 1px);
		transform: rotateZ(0);
	}
	100% {
		bottom: calc(50% - 1px);
		transform: rotateZ(45deg);
	}
}
@keyframes close_top_bar {
	0% {
		top: calc(50% - 1px);
		transform: rotateZ(-45deg);
	}
	50% {
		top: calc(50% - 1px);
		transform: rotateZ(0);
	}
	100% {
		top: 0;
		transform: rotateZ(0);
	}
}
@keyframes close_bottom_bar {
	0% {
		bottom: calc(50% - 1px);
		transform: rotateZ(45deg);
	}
	50% {
		bottom: calc(50% - 1px);
		transform: rotateZ(0);
	}
	100% {
		bottom: 0;
		transform: rotateZ(0);
	}
}

/*------------------------------
ヘッダー
------------------------------*/


/*------------------------------
コンテンツ
------------------------------*/
.section_bg{
	background-color: var(--section_bg);
}

.btn_normal{
	font-size: clamp(1.6rem,1.8vw,1.8rem);
	font-weight: bold;
	width: 90%;
	max-width: 300px;
	margin: 1em auto;
}
.btn_normal a{
	display: flex;
	justify-content: center;
	align-items: center;
	line-height: 1.2;
	text-decoration: none;
	color: var(--yell_color);
	height: 100%;
	padding: 0.85em 1.4em;
	border-radius: 4em;
	background-color: var(--blue_color);
	box-shadow: 0 2px 3px rgba(0, 0, 0, 0.15);
	position: relative;
	transition: opacity 0.5s;
}
.btn_normal a::before,
.btn_normal a::after{
	content: '';
	display: block;
	background-color: var(--yell_color);
	position: absolute;
	top: 50%;
	transform: translateY(-50%);
}
.btn_normal a::before{
	width: 2px;
	height: 50%;
	right: 1.4em;
}
.btn_normal a::after{
	width: 0.35em;
	height: 0.45em;
	clip-path: polygon(0 0,100% 50%,0 100%);
	right: 0.5em;
}


/*------------------------------
フッター
------------------------------*/
#footer{
	background-color: #fff;
}

.footer_nav_area{
	font-size: 1.6rem;
	width: 94%;
	max-width: 1000px;
	margin: 0 auto;
}
.footer_logo{}
.footer_nav{}

.footer_nav .footer_nav_box{}
.footer_nav .footer_nav_box ul{}
.footer_nav .footer_nav_box ul li{
	margin: 1.5em 0 0.5em 0;
}
.footer_nav .footer_nav_box ul li a{
	color: var(--black_color);
	text-decoration: none;
}

#copy{
	font-size: 1.2rem;
	text-align: center;
	color: var(--black_color);
	margin-top: 3em;
	padding: 1.5em 0.5em;
}

#btn_page_top{
	display: none;
	aspect-ratio: 1 / 1;
	border-radius: 50%;
	background-color: #293544;
	background-image: url("../img/pagetop_arrow.svg");
	background-repeat: no-repeat;
	background-position: center center;
	background-size: 30%;
	cursor: pointer;
	position: fixed;
	bottom: 20px;
	left: 20px;
	z-index: 998;
}


/*------------------------------
サイト共通
------------------------------*/
.font_size_ss{
	font-size: 0.7em;
}
.font_size_s{
	font-size: 0.85em;
}
.font_size_l{
	font-size: 1.2em;
}
.font_size_ll{
	font-size: 1.4em;
}

.font_red{
	color: var(--red_color);
}

.text_left{
	text-align: left;
}
.text_center{
	text-align: center;
}
.text_right{
	text-align: right;
}

.p_line p{
	margin-bottom: 0.75em;
}
.p_line p:last-of-type{
	margin-bottom: 0;
}

.p_line ul{
	margin: 0.75em 0;
}
.p_line ul li{
	margin-bottom: 0.25em;
}
.p_line ul li:last-of-type{
	margin-bottom: 0;
}

.text_underline{
	text-decoration: underline;
}
.text_through{
	text-decoration: line-through;
}

ul.li_indent05 > li,
.text_indent05{
	text-indent: -0.5em;
	padding-left: 0.5em;
}
ul.li_indent0_75 > li,
.text_indent0_75{
	text-indent: -0.75em;
	padding-left: 0.75em;
}
ul.li_indent1 > li,
.text_indent1{
	text-indent: -1em;
	padding-left: 1em;
}
ul.li_indent1_25 > li,
.text_indent1_25{
	text-indent: -1.25em;
	padding-left: 1.25em;
}
ul.li_indent1_5 > li,
.text_indent1_5{
	text-indent: -1.5em;
	padding-left: 1.5em;
}
ul.li_indent2 > li,
.text_indent2{
	text-indent: -2em;
	padding-left: 2em;
}
ul.li_indent2_5 > li,
.text_indent2_5{
	text-indent: -2.5em;
	padding-left: 2.5em;
}
ul.li_indent3 > li,
.text_indent3{
	text-indent: -3em;
	padding-left: 3em;
}
ul.li_indent4 > li,
.text_indent4{
	text-indent: -4em;
	padding-left: 4em;
}
ul.li_indent5 > li,
.text_indent5{
	text-indent: -5em;
	padding-left: 5em;
}
ul.li_indent6 > li,
.text_indent6{
	text-indent: -6em;
	padding-left: 6em;
}
ul.li_indent7 > li,
.text_indent7{
	text-indent: -7em;
	padding-left: 7em;
}
ul.li_indent8 > li,
.text_indent8{
	text-indent: -8em;
	padding-left: 8em;
}

.br_indent1{
	display: inline-block;
	text-indent: -1em;
	padding-left: 1em;
}

.mgn_t05{
	margin-top: 0.5em;
}
.mgn_t1{
	margin-top: 1em;
}
.mgn_t1_5{
	margin-top: 1.5em;
}
.mgn_t2{
	margin-top: 2em;
}
.mgn_t2_5{
	margin-top: 2.5em;
}
.mgn_t3{
	margin-top: 3em;
}
.mgn_t4{
	margin-top: 4em;
}
.mgn_r05{
	margin-right: 0.5em;
}
.mgn_r1{
	margin-right: 1em;
}
.mgn_r2{
	margin-right: 2em;
}
.mgn_r3{
	margin-right: 3em;
}
.mgn_r4{
	margin-right: 4em;
}
.mgn_b05{
	margin-bottom: 0.5em;
}
.mgn_b1{
	margin-bottom: 1em;
}
.mgn_b2{
	margin-bottom: 2em;
}
.mgn_b3{
	margin-bottom: 3em;
}
.mgn_b4{
	margin-bottom: 4em;
}
.mgn_l05{
	margin-left: 0.5em;
}
.mgn_l1{
	margin-left: 1em;
}
.mgn_l2{
	margin-left: 2em;
}
.mgn_l3{
	margin-left: 3em;
}
.mgn_l4{
	margin-left: 4em;
}

.pdd_t05{
	padding-top: 0.5em;
}
.pdd_t1{
	padding-top: 1em;
}
.pdd_t2{
	padding-top: 2em;
}
.pdd_t3{
	padding-top: 3em;
}
.pdd_t4{
	padding-top: 4em;
}
.pdd_r05{
	padding-right: 0.5em;
}
.pdd_r1{
	padding-right: 1em;
}
.pdd_r2{
	padding-right: 2em;
}
.pdd_r3{
	padding-right: 3em;
}
.pdd_r4{
	padding-right: 4em;
}
.pdd_b05{
	padding-bottom: 0.5em;
}
.pdd_b1{
	padding-bottom: 1em;
}
.pdd_b2{
	padding-bottom: 2em;
}
.pdd_b3{
	padding-bottom: 3em;
}
.pdd_b4{
	padding-bottom: 4em;
}
.pdd_l05{
	padding-left: 0.5em;
}
.pdd_l0_75{
	padding-left: 0.75em;
}
.pdd_l1{
	padding-left: 1em;
}
.pdd_l1_5{
	padding-left: 1.5em;
}
.pdd_l2{
	padding-left: 2em;
}
.pdd_l2_5{
	padding-left: 2.5em;
}
.pdd_l3{
	padding-left: 3em;
}
.pdd_l4{
	padding-left: 4em;
}

.flex{
	display: flex;
}
.flex_center{
	display: flex;
	justify-content: center;
}
.flex_between{
	display: flex;
	justify-content: space-between;
}
.flex_around{
	display: flex;
	justify-content: space-around;
}
.flex_wrap{
	flex-wrap: wrap;
}

.flex_start{
	display: flex;
	justify-content: flex-start;
}
.flex_end{
	display: flex;
	justify-content: flex-end;
}
.item_center{
	align-items: center;
}
.item_start{
	align-items: flex-start;
}
.item_end{
	align-items: flex-end;
}

.br_pc{}
.br_sp{}
.only_pc{}
.only_sp{}


/* ===========================================
	MediaQueries
=========================================== */
/* PC----------------------------- */
@media (min-width: 768px){
	/*------------------------------
	グローバルナビ
	------------------------------*/
	.header{
		font-size: clamp(1.4rem,1.15vw,1.6rem);
	}
	
	#nihongo_logo{
		flex-shrink: 0;
		width: 13%;
		max-width: 200px;
	}
	.gnav_box{
		width: 85%;
		max-width: 1200px;
	}
	
	#sp_menu{
		display: none;
	}
	.gnav_area{
		display: flex;
		justify-content: flex-end;
		height: 100%;
	}
	
	.gnav_btn_area{
		width: 19.5%;
		position: relative;
	}
	.gnav_btn_area::after{
		content: '';
		display: block;
		width: 1px;
		height: 40%;
		background-color: #999999;
		position: absolute;
		top: 30%;
		right: 0;
	}
	.gnav_btn_area:nth-last-of-type(2)::after,
	.gnav_btn_area:last-of-type::after{
		display: none;
	}
	.btn_for_contact{
		font-size: 0.85em;
		line-height: 1.2;
		width: 22%;
	}
	
	
	.btn_gnav{
		height: 100%;
	}
	.btn_gnav a{
		padding: 1.5em 0.5em;
	}
	.btn_gnav a:hover{
		text-decoration: underline;
	}
	.btn_for_contact .btn_gnav a:hover{
		opacity: 0.7;
		text-decoration: none;
	}
	
	
	.sub_drop{
		display: none;
		width: 100%;
		padding: 1.25em 0;
		box-shadow: 0 3px 4px rgba(0, 0, 0, 0.15);
		position: absolute;
		top: 100%;
		left: 0;
		background-color: #fff;
	}
	.sub_drop li{}
	.sub_drop li a{
		padding: 0.75em 0.5em;
	}
	.sub_drop li a:hover{
		text-decoration: underline;
	}
	
	/*------------------------------
	ヘッダー
	------------------------------*/
	
	/*------------------------------
	コンテンツ
	------------------------------*/
	.btn_normal a:hover{
		opacity: 0.65;
	}
	
	/*------------------------------
	フッター
	------------------------------*/
	#footer{
		padding: 8em 0;
	}
	
	.footer_nav_area{
		display: flex;
		justify-content: space-between;
		flex-wrap: wrap;
	}
	
	.footer_logo{
		width: 24%;
	}
	.footer_nav{
		display: flex;
		justify-content: space-between;
		flex-wrap: wrap;
		width: 70%;
	}
	.footer_nav .footer_nav_box{
		width: auto;
		margin: 0 4em 2em 0;
	}
	
	#btn_page_top{
		width: 60px;
	}
	
	
	/*------------------------------
	サイト共通
	------------------------------*/
	.text_left_pc{
		text-align: left;
	}
	.text_center_pc{
		text-align: center;
	}
	.text_right_pc{
		text-align: right;
	}
	
	.flex_pc{
		display: flex;
	}
	.flex_center_pc{
		display: flex;
		justify-content: center;
	}
	.flex_between_pc{
		display: flex;
		justify-content: space-between;
	}
	.flex_around_pc{
		display: flex;
		justify-content: space-around;
	}
	.flex_start_pc{
		display: flex;
		justify-content: flex-start;
	}
	.flex_end_pc{
		display: flex;
		justify-content: flex-end;
	}
	.item_center_pc{
		align-items: center;
	}
	.item_start_pc{
		align-items: flex-start;
	}
	.item_end_pc{
		align-items: flex-end;
	}
	
	.br_sp,
	.only_sp{
		display: none;
	}
}

/* スマホ----------------------------- */
@media (max-width: 767px){
	/*------------------------------
	グローバルナビ
	------------------------------*/
	#header_gnav{
		padding: 0.25em;
	}
	.header{
		font-size: clamp(1.2rem,4.2vw,1.6rem);
	}
	
	#nihongo_logo{
		/*width: 38%;*/
		width: 30%;
		max-width: 220px;
	}
	
	#sp_menu{
		display: flex;
		justify-content: center;
		align-items: center;
		aspect-ratio: 1 / 1;
		height: calc(100% - 0.7em);
		background-color: var(--red_color);
		position: absolute;
		top: 0.35em;
		right: 0.35em;
	}
	
	#sp_menu .sp_menu_inner{
		aspect-ratio: 27 / 20;
		display: block;
		width: 54%;
		position: relative;
	}
	
	#sp_menu .sp_menu_inner::before,
	#sp_menu .sp_menu_inner::after{
		content: '';
		display: block;
		width: 100%;
		height: 2px;
		background-color: #fff;
		position: absolute;
		left: 0;
	}
	#sp_menu .sp_menu_inner::before{
		top: 0;
	}
	#sp_menu .sp_menu_inner::after{
		bottom: 0;
	}
	
	/***ナビ開閉中***/
	#sp_menu.btn_gnav_def .sp_menu_inner,
	#sp_menu.btn_gnav_close .sp_menu_inner{
		background-image: linear-gradient(to bottom, transparent 0, transparent calc(50% - 1px), #fff calc(50% - 1px), #fff calc(50% + 1px), transparent calc(50% + 1px), transparent 100%);
	}
	#sp_menu.btn_gnav_open .sp_menu_inner{}
	
	/*開くときの動き*/
	#sp_menu.btn_gnav_open .sp_menu_inner::before{
		animation-name: open_top_bar;
		animation-duration: 0.25s;
		animation-fill-mode: forwards;
	}
	#sp_menu.btn_gnav_open .sp_menu_inner::after{
		animation-name: open_bottom_bar;
		animation-duration: 0.25s;
		animation-fill-mode: forwards;
	}
	
	
	/*閉じるときの動き*/
	#sp_menu.btn_gnav_close .sp_menu_inner::before{
		animation-name: close_top_bar;
		animation-duration: 0.25s;
		animation-fill-mode: forwards;
	}
	#sp_menu.btn_gnav_close .sp_menu_inner::after{
		animation-name: close_bottom_bar;
		animation-duration: 0.25s;
		animation-fill-mode: forwards;
	}
	
	
	.gnav_area{
		display: none;
		width: 100%;
		padding: 2em;
		background-color: #fff;
		position: absolute;
		top: 100%;
		left: 0;
	}
	
	.gnav_btn_area{
		margin: 1em 0;
	}
	.btn_gnav a{
		padding: 0.5em;
	}
	
	.sub_drop{
		font-size: 0.9em;
		margin: 0.5em 0;
	}
	.sub_drop li a{
		padding: 0.5em 0;
	}
	
	.btn_for_contact{
		line-height: 1.2;
		text-align: center;
	}
	.btn_for_contact .btn_gnav{
		display: inline-block;
		margin: 0 auto;
	}
	.btn_for_contact .btn_gnav a{
		padding: 1em 2em;
		border: solid 2px rgba(255, 255, 255, 0.6);
		border-radius: 2em / 50%;
		box-shadow: 0 2px 3px rgba(0, 0, 0, 0.15);
	}
	.btn_for_contact .btn_gnav a .for_contact_sp{
		font-size: 0.85em;
	}
	.btn_for_contact .btn_gnav a .nav_icon{
		width: 2.5em;
	}
	
	/*------------------------------
	ヘッダー
	------------------------------*/
	
	/*------------------------------
	コンテンツ
	------------------------------*/
	
	/*------------------------------
	フッター
	------------------------------*/
	#footer{
		padding: 4em 0;
	}
	
	.footer_nav_area{}
	.footer_logo{
		width: 65%;
		margin: 0 auto;
	}
	.footer_nav{
		width: 90%;
		margin: 2em auto 0 auto;
	}
	
	.footer_nav .footer_nav_box{
		margin-top: 3em;
	}
	
	#btn_page_top{
		width: 40px;
	}
	
	
	/*------------------------------
	サイト共通
	------------------------------*/
	.text_left_sp{
		text-align: left;
	}
	.text_center_sp{
		text-align: center;
	}
	.text_right_sp{
		text-align: right;
	}
	
	.flex_sp{
		display: flex;
	}
	.flex_center_sp{
		display: flex;
		justify-content: center;
	}
	.flex_between_sp{
		display: flex;
		justify-content: space-between;
	}
	.flex_around_sp{
		display: flex;
		justify-content: space-around;
	}
	.flex_start_sp{
		display: flex;
		justify-content: flex-start;
	}
	.flex_end_sp{
		display: flex;
		justify-content: flex-end;
	}
	.item_center_sp{
		align-items: center;
	}
	.item_start_sp{
		align-items: flex-start;
	}
	.item_end_sp{
		align-items: flex-end;
	}
	
	.br_pc,
	.only_pc{
		display: none;
	}
}