@charset "UTF-8";
/*
Theme Name: サンプル
Author: 株式会社メックコミュニケーションズ
Author URI: https://www.mec-com.co.jp
Date: 2025-02-014
*/


/*color
body .bg_g10{background-color:#FAFAFA;}
body .bg_g20{background-color:#F5F5F5;}
body .bg_g30{background-color:#EEEEEE;}
body .bg_g40{background-color:#E0E0E0;}
body .bg_g50{background-color:#BDBDBD;}
body .bg_g60{background-color:#757575;}
body .bg_g70{background-color:#616161;}
body .bg_g80{background-color:#424242;}文字カラー
body .bg_g90{background-color:#333333;}
-----------------------------------------------------------------------------------------*/
body{
/*メインカラー*/
	--color_main:#F4981C;/*オレンジ*/
	--color_main_vivid:#FF6600;/*オレンジ*/
	--color_main_pale:#FCF0DF;/*オレンジ*/

/*メックカラー*/
	--color_ao:#0068B6;/*メックカラー（青色）*/
	--color_aka:#E60012;/*メックカラー（赤）*/
	--color_kon:#1F2774;/*メックカラー（紺）*/
	
/*カテゴリーカラー*/
	--color_catR:#E85862;/*カテゴリー（赤色）*/
	--color_catG:#6ba123;/*カテゴリー（緑色）*/
	--color_catB:#0C97DE;/*カテゴリー（青色）*/
	--color_catS:#00BCD4;/*カテゴリー（空色）*/
	--color_catP:#9C27B0;/*カテゴリー（紫色）*/
	
/*背景の色*/
	--color_kuro:#0E1A30;/*黒*/
	--color_hai:#F5F5F5;/*灰色*/
	--color_mizu:#E5F2FE;/*水色*/
	--color_gin:#F5F4EF;/*銀色*/
	--color_nyu:#FAFAEF;/*乳白色*/
	--color_ki:#FEFDDC;/*黄色*/
	
/*リンクの色*/
	--color_linkB:#006DEB;/*青*/
	--color_linkY:#F2C611;/*黄色*/

/*em*/
	--color_notice:var(--color_aka);

/*テキストリンク*/
	--color_link:var(--color_linkB);


/*-------------------------base*/
/*text*/
	--tx_sen:var(--color_main);
	--tx_waku:var(--color_main);
	--tx_kiji:#CCCCCC;
	--tx_belt:var(--color_main);
	--tx_line:#CCCCCC;
	--tx_bar:var(--color_main);
	--tx_maru:var(--color_main);
/*ya*/
	--ya_tri:var(--color_aka);
	--ya_sen:var(--color_main);
	--ya_maru:var(--color_main);
/*btn*/
	--btn:var(--color_link);
	--btn_line:var(--color_link);
	--btn_line_bg:var(--color_kon);
/*list*/
	--list_line:#E0E0E0;
	--list_box:#FFF;
	--list_mark:var(--color_main);
/*sitemap*/
	--sitemap:var(--color_main);
	--sitemap_ya:var(--color_main);
/*parts*/
	--flow_no:#CCCCCC;
	--dtbox:#CCCCCC;
	--tab_btn:var(--color_main);
/*etc*/
	--sya:var(--color_main);
}



/*base
-----------------------------------------------------------------------------------------*/
/*-------------------------ベースの文字カラー*/
p,td{
	color:#424242;
}
.tx_w p,
.tx_w td{
	color:inherit;
}
/*-------------------------area*/
.area{
	position:relative;
	padding-top:60px;
	padding-bottom:60px;
}
@media screen and (max-width: 767px) {.area{padding-top:40px;padding-bottom:40px;}}
/*-------------------------btn*/
.btn{
	color:#FFF;
	font-weight:bold;
}
.btn.ya_tri::before,
.btn.ya_sen::before,
.btn.ya_maru::before{
	--ya_tri:#FFF;
	--ya_sen:#FFF;
	--ya_maru:#FFF;
}
.btn.ya_maru::before{background-image:url(images/ya_k.svg);mix-blend-mode:screen;}
.btn.btn_w{
	background:#FFF;
	color:var(--color_main);
	border:2px solid var(--color_main);
}
/*btn_w + ya*/
.btn_w.ya_tri::before,
.btn_w.ya_sen::before,
.btn_w.ya_maru::before{
	--ya_tri:var(--color_main);
	--ya_sen:var(--color_main);
	--ya_maru:var(--color_main);
}
/*-------------------------btn_line*/
.linkfile a.btn_line.bg::before,
.btn_line.bg::before{background-color:var(--color_kon);filter:unset;}
.btn_line.ya.ya_kon{background-image:url(images/line_ya_kon.svg);}
/*-------------------------list_line*/
.list_line p{
	color:#000;
}
@media print, screen and (min-width: 961px) {/*PC指定*/
	.list_line .list_cat{width:100px;height:30px;border-radius:5px;border:1px solid;}
}
@media screen and (max-width: 960px) {/*スマホ指定*/
}
/*-------------------------th_bold*/
.th_bold th{
	font-weight:bold;
}
/*-------------------------th_pl0*/
.th_pl0 th{
	padding-left:0;
}
/*-------------------------th_bg*/
.th_bg th{
	background:rgba(0,0,0,0.5)
}
/*-------------------------th_tx_w*/
.th_tx_w th{
	color:#FFF;
}
/*-------------------------list_box*/
/*-------------------------list_tag*/
.list_tag a:hover{
	border-color:var(--color_link);
	background:var(--color_link);
	color:#FFF;
}
/*-------------------------faq*/
/*-------------------------flow*/
/*-------------------------tx_kiji*/
.tx_kiji{
	border-top:1px solid #CCCCCC;
	border-bottom:1px solid #CCCCCC;
	font-size:3.6rem;
	line-height:1.33;
	font-weight: bold;
	padding:0.4em 0;
}
	@media screen and (max-width: 767px) {.tx_kiji{font-size:2.4rem;}}
/*-------------------------tel_icon*/
.tel_icon{
	height:0.8em;
	margin-right:0.2em;
}
/*-------------------------特色dot*/
.dot_maru li:before{transform: scale(0.8) translateY(0.15em);}
.dot_aka li:before{background:var(--color_aka);}
.dot_main li:before{background:var(--color_main);}
/*-------------------------kage*/
.kage1{box-shadow: 0 0 1px rgba(0,0,0,0.5);}
.kage2{box-shadow: 0 0 2px rgba(0,0,0,0.3);}
.kage3{box-shadow: 0 0 3px rgba(0,0,0,0.25);}
.kage4{box-shadow: 0 0 4px rgba(0,0,0,0.25);}
.kage5{box-shadow: 0 0 5px rgba(0,0,0,0.2);}
.kage6{box-shadow: 0 0 6px rgba(0,0,0,0.2);}
/*-------------------------sen_waku5*/
.sen_waku5{border:5px solid;}
/*-------------------------------------------------------------------------------------------------title*/
/*-------------------------tx_title1*/
.tx_title1{
	font-size:3.6rem;
	line-height:1.5;
	font-weight:bold;
	position:relative;
	margin-bottom:3rem;
	display:block;
}
@media screen and (max-width: 767px) {.tx_title1{font-size:2.6rem;margin-bottom:2rem;}}
/*-------------------------tx_title2*/
.tx_title2{
	font-size:3rem;
	line-height:1.5;
	font-weight:bold;
	position:relative;
	margin-bottom:2rem;
	display:block;
}
@media screen and (max-width: 767px) {.tx_title2{font-size:2.2rem;margin-bottom:1.5rem;}}
/*-------------------------tx_title3*/
.tx_title3{
	font-size:2.4rem;
	line-height:1.5;
	font-weight:bold;
	position:relative;
	margin-bottom:1.5rem;
	display:block;
}
@media screen and (max-width: 767px) {.tx_title3{font-size:2rem;margin-bottom:1.25rem;}}
/*-------------------------tx_title4*/
.tx_title4{
	font-size:2rem;
	line-height:1.5;
	font-weight:bold;
	margin-bottom:1rem;
	display:block;
}
@media screen and (max-width: 767px) {.tx_title4{font-size:1.8rem;margin-bottom:1rem;}}
/*-------------------------kage*/
.kage a{
	position:relative;
	box-shadow: 0px 3px 15px rgba(0,0,0,0.2);
}
.kage a:hover{
	top:1px;
	box-shadow:1px 1px 5px rgba(0,0,0,0.1);
}


/*planhyo
-----------------------------------------------------------------------------------------*/
.planhyo td,
.planhyo th{
	width:27%;
	padding:1em 0.5em;
	letter-spacing:0;
}
.planhyo th{
	width:19%;
}
@media screen and (max-width: 600px) {
	.planhyo .btn_line{background-position:right 0.3em bottom 0.75em;background-size:0.75em;padding:0.5em 1em;}
	.planhyo td{width:calc(100% - 2em / 3);}
	.planhyo th{width:2em;}
}

/*gamen
-----------------------------------------------------------------------------------------*/
.gamen{
	display:flex;
	position:relative;
	gap:20px 30px;
}
.gamen_pc{flex-basis:70%;}
.gamen_sp{flex-basis:30%;}
.gamen img{
	margin:0;
}
@media screen and (max-width: 767px) {
	.gamen{flex-direction:column;align-items:center;}
}

/*imgbox
-----------------------------------------------------------------------------------------*/
.imgbox{
	display:flex;
	justify-content:space-between;
	align-items:center;
	position:relative;
	gap:20px 40px;
}
.imgbox div{
	width:540px;
	max-width:100%;
}
.imgbox figure{
	width:500px;
	max-width:100%;
}
.imgbox img{
	border-radius:20px;
}
@media screen and (max-width: 767px) {
	.imgbox.reverse,
	.imgbox{flex-direction:column;}
	.imgbox div{min-width:100%;}
	.imgbox figure{margin-left:auto;margin-right:auto;}
}

/*-------------------------特殊な幅*/
body .max1000{
	max-width:1000px;
}
body .max900{
	max-width:900px;
}
body .w320{
	width:320px;
}
body .w440{
	width:440px;
}
body .w550{
	width:550px;
}
body .w63vw{
	width:63vw
}
body .w650{
	width:650px;
}
body .w390{
	width:390px;
}
body .w390{
	width:390px;
}
@media print, screen and (min-width: 768px) {
	.pc_50vw200{width:calc(50vw + 200px)}
	.pc_50vw{width:50vw}
	.pc_w750{width:750px;}
}
@media screen and (max-width: 960px) {
	.tb_wrap{flex-wrap:wrap;}
}
/*-------------------------pcsp_l（改行などで使用）
pc 961px以上
sp 601px以上のみ表示*/
@media screen and (max-width: 960px) and (min-width: 768px)  {.pcsp_l{display:none;}}
@media screen and (max-width: 560px)  {.pcsp_l{display:none;}}
/*-------------------------pcsp_s（改行などで使用）
pc 960px以下
sp 560px以下のみ表示*/
@media print, screen and (min-width: 961px) {.pcsp_s{display:none;}}
@media screen and (max-width: 767px) and (min-width: 601px)  {.pcsp_s{display:none;}}

/*-------------------------marqueeみたいなスクロール*/
.marquee_box{
	display:flex;
	overflow:hidden;
	width:100%;
}
.marquee{
	display:flex;
	flex-shrink:0;
	animation:marquee 20s infinite linear;
}
.marquee li{
	display:flex;
	align-items:center;
	padding:0 1.5vw;
}
@keyframes marquee {
	from{transform:translateX(0);}
	to{transform:translateX(-100%);}
}
@media print, screen and (min-width: 768px) {
	.marquee img{max-height:90px;}
}
@media screen and (max-width: 767px) {
	.marquee img{max-height:70px;}
}
/*-------------------------------------------------------------------------------------------------特色border_color*/
body .sen_main{border-color:var(--color_main);}
body .sen_ao{border-color:var(--color_ao);}
body .sen_aka{border-color:var(--color_aka);}
body .sen_kon{border-color:var(--color_kon);}
body .sen_catR{border-color:var(--color_catR);}
body .sen_catG{border-color:var(--color_catG);}
body .sen_catB{border-color:var(--color_catB);}
body .sen_catS{border-color:var(--color_catS);}
body .sen_catP{border-color:var(--color_catP);}
body .sen_linkB{border-color:var(--color_linkB);}
body .sen_linkY{border-color:var(--color_linkY);}
body .sen_notice{border-color:var(--color_notice);}
body .sen_link{border-color:var(--color_link);}
body .sen_kuro{border-color:var(--color_kuro);}
body .sen_hai{border-color:var(--color_hai);}
body .sen_mizu{border-color:var(--color_mizu);}
body .sen_gin{border-color:var(--color_gin);}
body .sen_nyu{border-color:var(--color_nyu);}
body .sen_ki{border-color:var(--color_ki);}
/*after*/
body .sen_main::after{border-color:var(--color_main);}
body .sen_ao::after{border-color:var(--color_ao);}
body .sen_aka::after{border-color:var(--color_aka);}
body .sen_kon::after{border-color:var(--color_kon);}
body .sen_catR::after{border-color:var(--color_catR);}
body .sen_catG::after{border-color:var(--color_catG);}
body .sen_catB::after{border-color:var(--color_catB);}
body .sen_catS::after{border-color:var(--color_catS);}
body .sen_catP::after{border-color:var(--color_catP);}
body .sen_linkB::after{border-color:var(--color_linkB);}
body .sen_linkY::after{border-color:var(--color_linkY);}
body .sen_notice::after{border-color:var(--color_notice);}
body .sen_link::after{border-color:var(--color_link);}
body .sen_kuro::after{border-color:var(--color_kuro);}
body .sen_hai::after{border-color:var(--color_hai);}
body .sen_mizu::after{border-color:var(--color_mizu);}
body .sen_gin::after{border-color:var(--color_gin);}
body .sen_nyu::after{border-color:var(--color_nyu);}
body .sen_ki::after{border-color:var(--color_ki);}
/*-------------------------------------------------------------------------------------------------特色bg*/
body .bg_main{background-color:var(--color_main);}
body .bg_main_pale{background-color:var(--color_main_pale);}
body .bg_ao{background-color:var(--color_ao);}
body .bg_aka{background-color:var(--color_aka);}
body .bg_kon{background-color:var(--color_kon);}
body .bg_catR{background-color:var(--color_catR);}
body .bg_catG{background-color:var(--color_catG);}
body .bg_catB{background-color:var(--color_catB);}
body .bg_catS{background-color:var(--color_catS);}
body .bg_catP{background-color:var(--color_catP);}
body .bg_linkB{background-color:var(--color_linkB);}
body .bg_linkY{background-color:var(--color_linkY);}
body .bg_notice{background-color:var(--color_notice);}
body .bg_link{background-color:var(--color_link);}
body .bg_kuro{background-color:var(--color_kuro);}
body .bg_hai{background-color:var(--color_hai);}
body .bg_mizu{background-color:var(--color_mizu);}
body .bg_gin{background-color:var(--color_gin);}
body .bg_nyu{background-color:var(--color_nyu);}
body .bg_ki{background-color:var(--color_ki);}
/*-------------------------------------------------------------------------------------------------特色text_color*/
body .tx_main{color:var(--color_main);}
body .tx_main_vivid{color:var(--color_main_vivid);}
body .tx_ao{color:var(--color_ao);}
body .tx_aka{color:var(--color_aka);}
body .tx_kon{color:var(--color_kon);}
body .tx_catR{color:var(--color_catR);}
body .tx_catG{color:var(--color_catG);}
body .tx_catB{color:var(--color_catB);}
body .tx_catS{color:var(--color_catS);}
body .tx_catP{color:var(--color_catP);}
body .tx_linkB{color:var(--color_linkB);}
body .tx_linkY{color:var(--color_linkY);}
body .tx_notice{color:var(--color_notice);}
body .tx_link{color:var(--color_link);}
body .tx_kuro{color:var(--color_kuro);}
body .tx_hai{color:var(--color_hai);}
body .tx_mizu{color:var(--color_mizu);}
body .tx_gin{color:var(--color_gin);}
body .tx_nyu{color:var(--color_nyu);}
body .tx_ki{color:var(--color_ki);}
/*-------------------------------------------------------------------------------------------------特色ya*/
body .ya_main::before{border-color:var(--color_main);background-color:var(--color_main);}
body .ya_main::before{border-color:var(--color_main);background-color:var(--color_main);}
body .ya_ao::before{border-color:var(--color_ao);background-color:var(--color_ao);}
body .ya_aka::before{border-color:var(--color_aka);background-color:var(--color_aka);}
body .ya_kon::before{border-color:var(--color_kon);background-color:var(--color_kon);}
body .ya_catR::before{border-color:var(--color_catR);background-color:var(--color_catR);}
body .ya_catG::before{border-color:var(--color_catG);background-color:var(--color_catG);}
body .ya_catB::before{border-color:var(--color_catB);background-color:var(--color_catB);}
body .ya_catS::before{border-color:var(--color_catS);background-color:var(--color_catS);}
body .ya_catP::before{border-color:var(--color_catP);background-color:var(--color_catP);}
body .ya_linkB::before{border-color:var(--color_linkB);background-color:var(--color_linkB);}
body .ya_linkY::before{border-color:var(--color_linkY);background-color:var(--color_linkY);}
body .ya_notice::before{border-color:var(--color_notice);background-color:var(--color_notice);}
body .ya_link::before{border-color:var(--color_link);background-color:var(--color_link);}
body .ya_kuro::before{border-color:var(--color_kuro);background-color:var(--color_kuro);}
body .ya_hai::before{border-color:var(--color_hai);background-color:var(--color_hai);}
body .ya_mizu::before{border-color:var(--color_mizu);background-color:var(--color_mizu);}
body .ya_gin::before{border-color:var(--color_gin);background-color:var(--color_gin);}
body .ya_nyu::before{border-color:var(--color_nyu);background-color:var(--color_nyu);}
body .ya_ki::before{border-color:var(--color_ki);background-color:var(--color_ki);}
/*-------------------------fw*/
body .fw100{font-weight:100}
body .fw200{font-weight:200}
body .fw300{font-weight:300}
body .fw400{font-weight:400}
body .fw500{font-weight:500}
body .fw600{font-weight:600}
body .fw700{font-weight:700}
body .fw800{font-weight:800}
body .fw900{font-weight:900}
/*-------------------------ban*/
body .ban2{display:grid;grid-template-columns:repeat(auto-fit,535px);justify-content:center;text-align:center;gap:30px;}
body .ban3{display:grid;grid-template-columns:repeat(auto-fit,346px);justify-content:center;text-align:center;gap:30px;}
body .ban4{display:grid;grid-template-columns:repeat(auto-fit,252px);justify-content:center;text-align:center;gap:30px;}
body .ban5{display:grid;grid-template-columns:repeat(auto-fit,196px);justify-content:center;text-align:center;gap:30px;}
@media screen and (max-width:1000px) {
	body .ban2,
	body .ban3,
	body .ban4,
	body .ban5{gap:20px;}
}
@media screen and (max-width:600px) {
	body .ban2,
	body .ban3{grid-template-columns:1fr;}
	body .ban4{grid-template-columns: repeat(2 , 1fr);}
	body .ban4 img{min-width:100%;}
}
@media screen and (max-width:480px) {
	body .ban5{grid-template-columns: repeat(2 , 1fr);}
	body .ban5 img{min-width:100%;}
}