@charset "utf-8";
@import url('https://fonts.googleapis.com/css2?family=Mulish&family=Noto+Sans+JP&family=Roboto&display=swap');
/* CSS Document */
body{
	font-family:'Noto Sans JP',"ヒラギノ角ゴ ProN W3","Hiragino Kaku Gothic ProN","メイリオ",Meiryo,sans-serif;
	font-size: 16px;
	line-height: 1.8;
	color: #000000;
	margin: 0;
	padding: 0;
}
#wrapper{
	margin: 0;
	padding: 0;
	overflow: hidden;
}
.content{
	margin: 0;
	padding: 0;
}
.wrap_area{
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;
	max-width: 1196px;
	margin: 0 auto;
}

/* ============================

aside

=============================*/
.wrap_area .area_left{
	width: calc(100% - 330px);
}


.wrap_area .area_right{
	width: 300px;
	padding: 0;
}
.wrap_area .area_right .title_small {
    text-align: left;
    padding: 20px;
    background: #F3F3F3;
    border-left: 3px solid #CF2C25;
	margin: 0;
}
.wrap_area .area_right .l_nav ul{
	margin: 0;
	padding: 0;
}
.wrap_area .area_right .l_nav ul li{
	list-style: none;
}
.wrap_area .area_right .l_nav ul li a {
    display: block;
    padding: 20px 10px;
    border-bottom: 1px dotted #707070;
    transition: 0.3s all;
}
.wrap_area .area_right .l_nav ul li a:hover{
	background: #F3F3F3;
}
.wrap_area .area_right .l_nav ul li > ul {
    margin: 0 0 0 20px;
    font-size: 90%;
}
.wrap_area .area_right .l_nav ul li > ul > li {
    position: relative;
}
.wrap_area .area_right .l_nav ul li > ul > li::before {
    content: "";
    width: 6px;
    height: 2px;
    background: #000000;
    position: absolute;
    top: 50%;
    left: 0;
}
.wrap_area .area_right .l_nav ul > li > ul > li a {
    padding: 15px 10px;
}




/* ============================

toggle共通

=============================*/
.wrap_toggle{
	position: relative;
}
.wrap_toggle .toggle_arrow{
	display: none;
	width: 60px;
	height: 60px;
	position: absolute;
	top: 0;
	right: 0;
}
.wrap_toggle .toggle_arrow::after {
    content: "";
    width: 20px;
    height: 20px;
    border-top: 1px solid #000000;
    border-left: 1px solid #000000;
    transform: rotate(-135deg);
    display: block;
    position: absolute;
    top: 15px;
    left: calc(50% - 7px);
}
.wrap_toggle .open.toggle_arrow::after{
	transform: rotate(45deg);
	top: 24px;
}


/* ============================

TITLE

=============================*/
/* ページタイトル */
.wrap_title_page{
	background-size: cover;
    background-position: 0 center;
    background-repeat: no-repeat;
	padding: 50px 50px 70px 50px;
}
.title_page {
    font-weight: normal;
    font-size: 43px;
    letter-spacing: 3px;
	line-height: 1.3;
}
.title_page .text_small {
    font-size: 14px;
    letter-spacing: 0;
}
/* ページタイトル通常 */
.wrap_title_page.nomal{
	position: relative;
	height: 445px;
}
.wrap_title_page.nomal .wrap_title{
	background: rgba(255,255,255,0.7);
	padding: 30px;
	position: absolute;
	width: 50%;
	top: 50%;
	left: 40%;
	transform: translateY(-50%);
}
.wrap_title_page.nomal i {
    padding: 10px 0;
}
.wrap_title_page.nomal .wrap_title .title_page {
    margin-bottom: 10px;
}
.wrap_title_page.nomal .wrap_title .title_middle {
    text-align: left;
    margin-bottom: 20px;
    letter-spacing: 2px;
}
.wrap_title_page.nomal .wrap_title .lead{
	
}


/* 見出し大 */
.title_large{
	font-size: 187%;
	padding: 0 0 20px 0;
	margin: 0 0 60px 0;
	position: relative;
	text-align: center;
	font-weight: normal;
	line-height: 1.3;
	font-family: 'Mulish','Noto Sans JP',"ヒラギノ角ゴ ProN W3","Hiragino Kaku Gothic ProN","メイリオ",Meiryo,sans-serif;
}
.title_large::after{
	content: "";
	width: 35px;
	height: 5px;
	background: #CF2C25;
	position: absolute;
	bottom: 0;
	left: 50%;
	transform: translateX(-50%);
}
.title_large .text_small {
    margin: 10px 0 5px 0;
    font-size: 60%;
    display: inline-block;
}
/* 左寄せの時は無し */
.title_large.text_left::after {
    background: inherit;
}

/* 見出し中 */
.title_middle{
	font-size: 140%;
	margin: 0 0 30px 0;
	text-align: center;
	line-height: 1.4;
	font-weight: 600;

}
/* 見出し小 */
.title_small{
	font-size: 125%;
	margin: 10px 0;
	text-align: center;
	font-weight: normal;
	line-height: 1.4;
	font-family: 'Roboto','Noto Sans JP',"ヒラギノ角ゴ ProN W3","Hiragino Kaku Gothic ProN","メイリオ",Meiryo,sans-serif;
}


/* ============================

SECTION

=============================*/
.inner{
	max-width: 1200px;
	width: 90%;
	margin: 0 auto;
	padding: 80px 0 80px 0;
}


/* ============================

カラム

=============================*/
.wrap_item{
	display: flex;
	flex-wrap: wrap;
}
.wrap_item > .item{
	margin: 0 2% 40px 2%;
	position: relative;
}
/* サムネ */
.item .wrap_img{
	position: relative;
	width: 100%;
	margin-bottom: 0;
	overflow: hidden;
}
.item .wrap_img::before{
	content:"";
    display: block;
    padding-top: 75%;
}
.item .wrap_img.wide::before{
    padding-top: 56.25%;/* サムネ ワイド*/
}
.item .wrap_img.square::before{
    padding-top: 80%;/* サムネ 正方形に近い*/
}
.item .wrap_img img,
.item .wrap_img iframe{
position: absolute;
left: 50%;
top: 50%;
transform: translate(-50%,-50%);
width: 100%;
height: 100%;
object-fit: cover;
font-family: 'object-fit: cover;'; /* ofi.js */
}



/* aタグオンマウス */
.item a .wrap_img img{
	transition: all .3s;
}
.item a:hover .wrap_img img{
	transform: translate(-50%,-50%) scale(1.05,1.05)!important;
	transform-origin: center center;
}
.item .wrap_text{}

/* 2カラム */
.wrap_item.column2{	margin-left: -2%;margin-right: -2%;}
.wrap_item.column2 > .item{
	width: 46%;
}
/* 3カラム */
.wrap_item.column3{	margin-left: -2%;margin-right: -2%;}
.wrap_item.column3 > .item{
	width: 29.3333%;
}
/* 4カラム */
.wrap_item.column4{	margin-left: -2%;margin-right: -2%;}
.wrap_item.column4 > .item{
	width: 21%;
}
/* 5カラム */
.wrap_item.column5{	margin-left: -2%;margin-right: -2%;}
.wrap_item.column5 > .item{
	width: 16%;
}
/* 6カラム */
.wrap_item.column6{	margin-left: -2%;margin-right: -2%;}
.wrap_item.column6 > .item{
	width: 12.6666%;
}



/* ============================

詳細ページ

=============================*/
.wrap_item.detail {
    margin: 0 auto 40px auto;
    display: block;
}
.wrap_item.detail .item {
    margin: 0 0 40px 0;
}





/* ============================

ボタン

=============================*/
/* 基本赤枠 */
.btn {
    display: block;
    padding: 13px 80px 13px 50px;
    text-align: center;
    transition: all 0.3s;
    border: 1px solid #CF2C25;
    color: #CF2C25;
    max-width: 350px;
    position: relative;
	z-index: 1;
}
.btn::before{
	position: absolute;
	top: 0;
	right: 0;
	bottom: 0;
	left: 0;
	z-index: -1;
	background: #CF2C25;
	transition: transform .3s;
	content: "";
	transform-origin: right top;
	transform: scale(0, 1);
}
.btn::after{
	position: absolute;
	top: 0;
	right: 0;
	bottom: 0;
	left: 0;
	z-index: -2;
	background: #ffffff;
	content: "";
}
.btn:hover:before{
	transform-origin: left bottom;
	transform: scale(1, 1);
	content: "";
}
.btn:hover{
	color: #ffffff;
}
.btn .arrow {
	background: #CF2C25;
    height: 1px;
    width: 40px;
    position: absolute;
    display: block;
    right: 30px;
    top: 50%;
}
.btn .arrow::after{
	content: "";
	width: 0;
	height: 0;
	border-style: solid;
	border-width: 3.5px 0 3.5px 14px;
	border-color: transparent transparent transparent #CF2C25;
	position: absolute;
	top: -3px;
    right: -13px;
}
.btn:hover .arrow{
	background: #ffffff;
}
.btn:hover .arrow::after{
	border-color: transparent transparent transparent #ffffff;
}


/* サブボタン */
a.btn.back_light_gray {
    border: none;
    color: #000000;
	background: #E2E2E2;
	padding: 13px 20px 13px 20px;
	max-width: 290px;
	font-size: 90%;
}
a.btn.back_light_gray::before{
	position: absolute;
	top: 0;
	right: 0;
	bottom: 0;
	left: 0;
	z-index: -1;
	background: #E2E2E2;
	transition: transform .3s;
	content: "";
	transform-origin: right top;
	transform: scale(0, 1);
}
a.btn.back_light_gray::after{
	position: absolute;
	top: 0;
	right: 0;
	bottom: 0;
	left: 0;
	z-index: -2;
	background: rgba(255,255,255,0.5);
	content: "";
}
a.btn.back_light_gray:hover:before{
	transform-origin: left bottom;
	transform: scale(1, 1);
	content: "";
}

/* フォームボタン */
.btn.form{
	display: inline-block;
	padding: 10px;
	width: 200px;
	cursor: pointer;
}
.btn.form:disabled{
	border-color: #707070;
	color: #707070;
	cursor: default;
}
.btn.form:disabled:hover:before{
	content: none;
}
input.btn.form{
	background: #ffffff;
}
input.btn.form:hover{
	background: #CF2C25;
}
input.btn.form:disabled:hover{
	border-color: #707070;
	color: #707070;
	cursor: default;
	background: #ffffff;
}



/* ============================

アイコン

=============================*/
i {
    font-size: 80%;
    display: inline-block;
    line-height: 1;
    font-style: normal;
}



/* ============================

改行

=============================*/
br.sp{	display: none;}
br.pc{	display: block;}


/* ============================

注意喚起

=============================*/
.caution {
    margin-left: 1em;
    text-indent: -1em;
    font-size: 90%;
    line-height: 1.3;
}
.caution::before {
    content: "※";
}

/* ============================

リスト

=============================*/
/* ul ol */
.list_ul,
.list_ol{
	padding-left: 20px;
	margin: 10px 0;
}
.list_ul li,
.list_ol li{
	margin-bottom: 5px;
}
.list_ul li {
    list-style: disc;
}
.no_style{
	list-style: none;
	padding-left: 0;
	margin: 10px 0;
}
/* list_desc */
.list_desc {
    padding-left: 22px;
}
.list_desc li {
    list-style: none;
    margin-bottom: 10px;
}
.list_desc li::before {
    content: "";
    height: 12px;
    width: 12px;
    background: #E84343;
    display: inline-block;
    margin: 0 10px 0px -21px;
    border-radius: 50%;
}

/* dl */
.list_dl{
	display: flex;
    flex-wrap: wrap;
}
.list_dl dt {
    width: 20%;
    font-weight: bold;
}
.list_dl dd {
    width: 80%;
    padding-left: 2%;
	line-height: 1.5;
	margin-bottom: 10px;
}
.list_dl.short dt {
    width: 15%;
}
.list_dl.short dd {
    width: 83%;
    margin-left: 2%;
}
.list_dl.half dt {
    width: 50%;
}
.list_dl.half dd {
    width: 48%;
    margin-left: 2%;
}



/* ============================

幅調整

=============================*/
.w100_block {
    width: 100%;
}
.w90_block {
    width: 90%;
}
.w80_block {
    width: 80%;
}
.w70_block {
    width: 70%;
}


/* ============================

背景色

=============================*/
.back_black,a.back_black{
    color: #ffffff;
    background: #000;
}
.back_green,a.back_green{
    color: #ffffff;
    background: #A7BF00;
}

.back_gray,a.back_gray{
    color: #ffffff;
    background: #707070;
}
.back_light_gray,a.back_light_gray{
    color: #000000;
    background: #f3f3f3;
}
.back_red,a.back_red{
    color: #fff;
    background: #CF2C25;
}
.back_white,a.back_white{
	color: #000000;
	background: #ffffff;
}

/* ============================

テーブル 

=============================*/
/* 枠線 */
table.tbl_line{
	border-collapse: collapse;
    width: 100%;
}
table.tbl_line th,
table.tbl_line td {
    border: solid 1px #C8C8C8;
    padding: 10px;
}
table.tbl_line th {
    background: #F3F3F3;
}
table.tbl_line caption {
    text-align: left;
    margin-bottom: 10px;
}

/* ============================

枠・線

=============================*/
.line_black{border: 1px solid #000000;}
.line_red{border: 1px solid #CF2C25;}
.line_gray{border: 1px solid #707070;}
.line_light_gray{border: 1px solid #F3F3F3;}
.line_light_white{border: 1px solid #ffffff;}

/* ============================

書式

=============================*/
/* 段落 */
.text_center{text-align: center;}
.text_left{text-align: left;}
.text_right{text-align: right;}

/* テキスト */
.storong{font-weight: bold;}
.text_red,a.text_red{ color: #CF2C25;}
.text_gray,a.text_gray{ color: #707070;}
.text_black,a.text_black{ color: #000000;}
.text_white,a.text_white{ color: #ffffff;}
.text_marker_red {background: #CF2C25;color: #ffffff;padding: 2px 8px 1px 8px; display: inline-block;}
.text_marker_light_gray {background: #F3F3F3;padding: 2px 8px 1px 8px; display: inline-block;}
.text_marker_gray {background: #707070;padding: 2px 8px 1px 8px; color: #ffffff; display: inline-block;}
.text_marker_black {background: #000000;padding: 2px 8px 1px 8px; color: #ffffff; display: inline-block;}
.text_storong{	font-weight: bold;}
.text_underline{text-decoration: underline;}
.text_large{ font-size: 130%;}
.text_small{ font-size: 80%;}
address,
em{
	font-style: normal;
}

/* リンク */
a{
	text-decoration: none;
	color: #000000;
	transition: 0.3s all;
	word-break: break-all;
}
a.text_red,
a.text_gray,
a.text_black{
	word-break: break-all;
}
a.text_red:hover,
a.text_gray:hover,
a.text_black:hover{
	text-decoration: underline;
}

.link_out::after{
	content: "";
	display: inline-block;
	width: 20px;
	height: 20px;
	background: url("../img/common/icon_out_link_rd.png") center center no-repeat;
	background-size: contain;
	margin: 0 0 -4px 3px;
}
.link_out.text_black::after{
	background: url("../img/common/icon_out_link_bk.png") center center no-repeat;
	background-size: contain;
}
.link_out.text_white::after{
	background: url("../img/common/icon_out_link_wh.png") center center no-repeat;
	background-size: contain;
}

.link_pdf::after{
	content: "";
	display: inline-block;
	width: 20px;
	height: 20px;
	background: url("../img/common/icon_pdf_rd.png") center center no-repeat;
	background-size: contain;
	margin: 0 0 -4px 3px;
}



/* ============================

margine padding

=============================*/
/* margin */
.mauto{ margin: auto;}
.m10{ margin: 10px;}
.m20{ margin: 20px;}
.m30{ margin: 30px;}
.m40{ margin: 40px;}
.m50{ margin: 50px;}
.m60{ margin: 60px;}
.m70{ margin: 70px;}
.m80{ margin: 80px;}
.m90{ margin: 90px;}
.m100{ margin: 100px;}
.mt10{	margin-top: 10px;}
.mt20{	margin-top: 20px;}
.mt30{	margin-top: 30px;}
.mt40{	margin-top: 40px;}
.mt50{	margin-top: 50px;}
.mt60{	margin-top: 60px;}
.mt70{	margin-top: 70px;}
.mt80{	margin-top: 80px;}
.mt90{	margin-top: 90px;}
.mt100{	margin-top: 100px;}
.mb10{	margin-bottom: 10px;}
.mb20{	margin-bottom: 20px;}
.mb30{	margin-bottom: 30px;}
.mb40{	margin-bottom: 40px;}
.mb50{	margin-bottom: 50px;}
.mb60{	margin-bottom: 60px;}
.mb70{	margin-bottom: 70px;}
.mb80{	margin-bottom: 80px;}
.mb90{	margin-bottom: 90px;}
.mb100{	margin-bottom: 100px;}
.mr10{	margin-right: 10px;}
.mr20{	margin-right: 20px;}
.mr30{	margin-right: 30px;}
.mr14{	margin-right: 40px;}
.mr50{	margin-right: 50px;}
.mr60{	margin-right: 60px;}
.mr70{	margin-right: 70px;}
.mr80{	margin-right: 80px;}
.mr90{	margin-right: 90px;}
.mr100{	margin-right: 100px;}
.ml10{	margin-left: 10px;}
.ml20{	margin-left: 20px;}
.ml30{	margin-left: 30px;}
.ml14{	margin-left: 40px;}
.ml50{	margin-left: 50px;}
.ml60{	margin-left: 60px;}
.ml70{	margin-left: 70px;}
.ml80{	margin-left: 80px;}
.ml90{	margin-left: 90px;}
.ml100{	margin-left: 100px;}
/* padding */
.p10{ padding: 10px;}
.p20{ padding: 20px;}
.p30{ padding: 30px;}
.p40{ padding: 40px;}
.p50{ padding: 50px;}
.p60{ padding: 60px;}
.p70{ padding: 70px;}
.p80{ padding: 80px;}
.p90{ padding: 90px;}
.p100{ padding: 100px;}
.pt10{	padding-top: 10px;}
.pt20{	padding-top: 20px;}
.pt30{	padding-top: 30px;}
.pt40{	padding-top: 40px;}
.pt50{	padding-top: 50px;}
.pt60{	padding-top: 60px;}
.pt70{	padding-top: 70px;}
.pt80{	padding-top: 80px;}
.pt90{	padding-top: 90px;}
.pt100{	padding-top: 100px;}
.pb10{	padding-bottom: 10px;}
.pb20{	padding-bottom: 20px;}
.pb30{	padding-bottom: 30px;}
.pb14{	padding-bottom: 40px;}
.pb50{	padding-bottom: 50px;}
.pb60{	padding-bottom: 60px;}
.pb70{	padding-bottom: 70px;}
.pb80{	padding-bottom: 80px;}
.pb90{	padding-bottom: 90px;}
.pb100{	padding-bottom: 100px;}
.pr10{	padding-right: 10px;}
.pr20{	padding-right: 20px;}
.pr30{	padding-right: 30px;}
.pr40{	padding-right: 40px;}
.pr50{	padding-right: 50px;}
.pr60{	padding-right: 60px;}
.pr70{	padding-right: 70px;}
.pr80{	padding-right: 80px;}
.pr90{	padding-right: 90px;}
.pr100{	padding-right: 100px;}
.pl10{	padding-left: 10px;}
.pl20{	padding-left: 20px;}
.pl30{	padding-left: 30px;}
.pl40{	padding-left: 40px;}
.pl50{	padding-left: 50px;}
.pl60{	padding-left: 60px;}
.pl70{	padding-left: 70px;}
.pl80{	padding-left: 80px;}
.pl90{	padding-left: 90px;}
.pl100{	padding-left: 100px;}



@media screen and (max-width: 1199px) {
/*
============================ TB CSS ============================

TB専用CSS ipadpro 1200px

================================================================
*/

/* ============================

カラム 1200px

=============================*/
.wrap_area .column5 .item,
.wrap_area .column4 .item{
	width: 46%;
}
.wrap_area .column5 .item .line_circle,
.wrap_area .column4 .item .line_circle{
    width: 70px;
    height: 70px;
    top: -40px;
	padding-top: 15px;
	font-size: 180%;
}




}/* end 1200px */




@media screen and (max-width: 1023px) {
/*
============================ TB CSS ============================

TB専用CSS ipadpro 1024px

================================================================
*/

/* ============================

aside 1024px

=============================*/
.wrap_area .area_left,
.wrap_area .area_right{
    width: 100%;
}



/*  1024px */
.inner{
}

/* ============================

toggle共通　1024px

=============================*/
.hover .toggle_arrow{
	display: block;
}


/* ============================

リード文 1024px

=============================*/
.lead p{
	width: 100%;
}


}/* end 1024px */


@media screen and (max-width: 767px) {
/*
============================ sp CSS ============================

SP専用CSS 横スマホ　ipad 768px

================================================================
*/

/* ============================

パンくず 768px

=============================*/
.breadcrumb ul li {
    margin-right: 26px;
}
.breadcrumb ul li::after {
    width: 10px;
    top: 13px;
}
.breadcrumb ul li a i {
    padding: 0;
    margin-bottom: -3px;
}


/* ============================

カラム 768px

=============================*/

/* 2カラム */
.wrap_item.column2{	margin-left: 0;margin-right: 0;}
.wrap_item.column2 .item{
	width: 96%;
}
/* 3カラム */
.wrap_item.column3{	margin-left: 0;margin-right: 0;}
.wrap_item.column3 .item{
	width: 96%;
}
/* 4カラム */
.wrap_item.column4{	margin-left: 0;margin-right: 0;}
.wrap_item.column4 .item{
	width: 96%;
}
/* 5カラム */
.wrap_item.column5{	margin-left: 0;margin-right: 0;}
.wrap_item.column5 .item{
	width: 96%;
}
.line_circle {
    width: 50px;
    height: 50px;
    top: -30px;
    left: 50%;
    transform: translateX(-50%);
    font-size: 140%;
    padding-top: 9px;
}
.line_circle + .wrap_text {
    margin-bottom: 20px
}
.item > .arrow {
    position: relative;
    top: 10px;
    right: inherit;
    width: 2px;
    height: 20px;
    transform: rotate(0) translateX(-50%);
    display: block;
    background: #000000;
    margin: 0 auto 30px auto;
}
/* テキストとセット時 */
.wrap_line_circle .line_circle {
    bottom: -20px;
    width: 80px;
    height: 80px;
    padding-top: 20px;
}
.wrap_line_circle .title_small{
	padding-left: 80px;
}

.item > .arrow::after {
    transform: rotate(135deg);
    top: 12px;
    right: -4px;
}

/*　横　*/
.wrap_item.beside .item .wrap_img {
    width: 100%;
}
.wrap_item.beside .item .wrap_text {
    width: 100%;
}


/* ============================

ボタン 768px

=============================*/
/* 基本赤枠 768px */
.btn {
    padding: 13px 70px 13px 50px;
}
.btn .arrow {
    width: 25px;
}


/* ============================

フォーム 768px

=============================*/
/* チェックボックス */
input[type="checkbox"] {
    width: 30px;
    height: 30px;
    margin: 10px 0;
    vertical-align: middle;
}


/* ============================

幅調整 768px

=============================*/
.w90_block,
.w80_block,
.w70_block{
    width: 100%;
}

/* ============================

リスト　768px

=============================*/
.list_dl dt {
    width: 100%;
    font-weight: bold;
}
.list_dl dd {
    width: 100%;
    padding-left: 0;
    margin-bottom: 10px;
}



/* ============================

改行

=============================*/
br.sp{	display: block;}
br.pc{	display: none;}


/* ============================

背景のグレー四角 768px

=============================*/
.square::after{
	width: 50%;
}
.square.double::before{
	width: 50%;
}






}/* end 768px */




/*
============================ sp CSS ============================

SP専用CSS 縦スマホ

====================================================================
*/
@media screen and (max-width: 479px) {
#header .header_left {
    width: 80%;
}
#header .header_left .header_logo {
    width: 50%;
}



}