@charset "utf-8";
/* CSS Document */


/* -------------------------------------------------- */
/* FONTS -------------------------------------------- */
/* -------------------------------------------------- */

/* font-size */
/* bodyの指定：62.5%（10px）、#mainの指定：1.4em（14px）からの相対サイズです。 
　各クラスの最後の（）内のpx数は、大体の数値です。　*/
.fs-xsmall { font-size : .64em !important; /*9px*/ }
.fs-small { font-size : .85em !important; /*12px*/ }
.fs-medium { font-size : 1em !important; /*14px*/ }
.fs-large { font-size : 1.14em !important; /*16px*/ }
.fs-xlarge { font-size : 1.57em !important; /*22px*/ }
.fs-xxlarge { font-size : 1.86em !important; /*26px*/ }

.fb { font-weight: bold !important; }
.fwNormal{ font-weight: normal !important; }

.u-line{text-decoration: underline;}

.fc-redCmn{ color: #E02130 !important; }

/* -------------------------------------------------- */
/* POSITION ----------------------------------------- */
/* -------------------------------------------------- */

.tc { text-align: center; }
.tl { text-align: left; }
.tr { text-align: right; }
.va { vertical-align: middle; }
.float-l{ float: left; }
.float-r{ float: right; }

.right-img { float: right; margin-left: 10px; }
.left-img { float: left; margin-right: 10px; }
@media screen and (max-width: 480px) { 
.left-img, .right-img { float: none; margin: 0 auto 10px auto; display: block; }
}

.right-img-300 { float: right; margin-left: 10px; }
.left-img-300 { float: left; margin-right: 10px; }
@media screen and (max-width: 600px) { 
.left-img-300, .right-img-300 { width: 300px; float: none; margin: 0 auto 10px auto; display: block; }
.cmn-box .left-img-300
, .cmn-box .right-img-300 { width: 260px; }
}

/*layout-left, layout-right */
.layout-right, .layout-left { width: 315px; margin-bottom: .5em; }
.layout-left { float: left; }
.layout-right { float: right; }
@media screen and (max-width: 768px) {
.layout-right, .layout-left { width: 49%; }
}
@media screen and (max-width: 480px) {
.layout-right, .layout-left { width: 100%; float: none; }
}


/* -------------------------------------------------- */
/* SPACE -------------------------------------------- */
/* -------------------------------------------------- */
.overf-hidden { overflow: hidden; }
.margin-auto{ margin-right: auto; margin-left: auto; }

.mt0 {margin-top: 0 !important;}
.mt5 {margin-top: 5px !important;}
.mt10 {margin-top: 10px !important;}
.mt15 {margin-top: 15px !important;}
.mt20 {margin-top: 20px !important;}
.mt25 {margin-top: 25px !important;}
.mt40 {margin-top: 40px !important;}
.mt55 {margin-top: 55px !important;}
.mt60 {margin-top: 60px !important;}
.mt80 {margin-top: 80px !important;}
.mb0 {margin-bottom: 0 !important;}
.mb5 {margin-bottom: 5px !important;}
.mb10 {margin-bottom: 10px !important;}
.mb15 {margin-bottom: 15px !important;}
.mb20 {margin-bottom: 20px !important;}
.mb25 {margin-bottom: 25px !important;}
.mb30 {margin-bottom: 30px !important;}
.mb35 {margin-bottom: 35px !important;}
.mb40 {margin-bottom: 40px !important;}
.mb45 {margin-bottom: 45px !important;}
.mb50 {margin-bottom: 50px !important;}
.mb60 {margin-bottom: 60px !important;}
.mb80 {margin-bottom: 80px !important;}
.mb1em {margin-bottom: 1.2em !important;}
.mb2em {margin-bottom: 2em !important;}
.ml25 {margin-left: 25px !important;}
.ml45 {margin-left: 45px !important;}
.ml1em {margin-left: 1em !important;}
.ml2em {margin-left: 2em !important;}
.mr10 {margin-right: 10px !important;}
.pr3 {padding-right: 3px !important;}
.pt15 {padding-top: 15px !important;}
.p-20{ padding: 20px; }
.p-40{ padding: 40px; }
.sp_R1em {padding: 0 1em 0 0;}
.sp_L1em {padding: 0 0 0 1em;}
.sp_L2em {padding: 0 0 0 2em;}

.clear { clear: both; }
.noline { text-decoration:none; }

.line-marker { position: relative; padding: 0 .2em .1em; }
.line-marker::after { position: absolute; bottom: 0; left: 0; z-index: -1; content: ''; width: 100%; height: 10px; background-color: #FAB243; }

.head-marker:before{ content: "■"; color: #999; }



/* -------------------------------------------------- */
/* COMMON ------------------------------------------- */
/* -------------------------------------------------- */
/* ----- COLORs ----- */
/*
red #E02130(224,33,48)
yellow　#FAB243
*/
/* ----- COLORS ----- */

/* cmn-js.jsにてanimationクラスの動きを設定 */
/* animationクラス、activeクラスで対 */
.animation{
	opacity : 0;
	visibility: hidden;
	transition: 3s;
	transform: translateY(50px);
}
.active{
	opacity: 1;
	visibility: visible;
	transform: translateY(0);
}

/* COMMON - ul ---------------- */
.ul-cmn li { position: relative; margin: 0 0 .6em 0;}
.ul-cmn li:before{color: #ffab00; content: "\f138"; font-weight:normal; font-family: "Font Awesome 5 Free",sans-serif; margin-right: 5px;}

.ul-cmn-red li { position: relative; margin: 0 0 .6em .2em;}
.ul-cmn-red li:before{ color: #E02130; content: "\f138"; font-weight:normal; font-family: "Font Awesome 5 Free",sans-serif; margin-right: 5px; }

.ul-cmn ol { list-style: decimal; }
.ul-cmn ol li{ background: none; }

.ul-cmn-inline{ list-style: none outside; margin: 1em 0 0 0; padding: 0; overflow: hidden; } 
.ul-cmn-inline li{ margin: 0 .5em .6em; line-height: 1.2; border: 1px solid rgba(224,33,48,.05); float: left; border-radius: 18px; }
.ul-cmn-inline li a{ display: block; padding: .5em .6em .3em; text-decoration: underline; background: rgba(224,33,48,.1); }
.ul-cmn-inline li a:hover{ background: rgba(224,33,48,.5); /*color: #FFF;*/ /*text-decoration: underline;*/ }

.ul-cmn-inline-2{ list-style: none outside; margin: 1em 0 1em 0; padding: 0; overflow: hidden; } 
.ul-cmn-inline-2 li{ margin: 0 .5em .6em; line-height: 1.2; border: 1px solid rgba(224,33,48,.05); float: left; border-radius: 8px; display: block; padding: .5em .6em .3em; background: rgba(224,33,48,.05); }

.ul-nml{ margin-left: 1.2em; list-style: disc !important; }
.ul-nml li{ background: none; margin-bottom: .4em; }

.ul-check { }
.ul-check li { margin: 0 0 .8em 0; padding: 0 0 0 20px; background: url(../images/cmn/ul_check_bg.gif) no-repeat left 2px; }


/* COMMON - ol ---------------- */
.ol-number { margin: 0 0 0 1.2em; list-style: decimal outside; }
.ol-number li{ margin-bottom: .1em; }
@media screen and (max-width: 768px) {
.ol-number div { float: none; margin: 0 auto 1em auto; width: 230px; }
}
/*
.ol-bold{ color:#900; font: italic normal bold 1em/1 Georgia, sans-serif; list-style: decimal outside; }
.ol-bold li{ margin: 0 0 1em 1.4em; }
.ol-bold li .li-ttl{ color: #333; font: normal normal bold 1em/160% Avenir , "Helvetica Neue" , Helvetica , Arial , Verdana , Roboto , "ヒラギノ角ゴ Pro W3" , "Hiragino Kaku Gothic Pro" , "メイリオ" , Meiryo , "Meiryo UI" , "ＭＳ Ｐゴシック" , "MS PGothic" , sans-serif; border-bottom: 1px solid #C00; }
.ol-bold li p{ color: #333; font: normal normal normal 1em/160% Avenir , "Helvetica Neue" , Helvetica , Arial , Verdana , Roboto , "ヒラギノ角ゴ Pro W3" , "Hiragino Kaku Gothic Pro" , "メイリオ" , Meiryo , "Meiryo UI" , "ＭＳ Ｐゴシック" , "MS PGothic" , sans-serif; margin: 0; padding: 0; }
.ol-bold li span{ color: #333; font: normal normal bold 1em/1 Avenir , "Helvetica Neue" , Helvetica , Arial , Verdana , Roboto , "ヒラギノ角ゴ Pro W3" , "Hiragino Kaku Gothic Pro" , "メイリオ" , Meiryo , "Meiryo UI" , "ＭＳ Ｐゴシック" , "MS PGothic" , sans-serif; }
*/

/* COMMON - dl ---------------- */
.dl-cmn { border-bottom: 1px dotted #999; width: 100%; padding: 0; background: #EEE; overflow: hidden; }
.dl-cmn dt, .dl-cmn dd { padding: .6em 1%; margin: 0; border-top: 1px dotted #999; display: inline-block; }
.dl-cmn dt { width: 30%; float: left; clear: both; }
.dl-cmn dd { width: 70%; background: #FFF; float: right; }
@media screen and (max-width: 480px) { .dl-cmn dt,.dl-cmn dd { width: 100%; } }

/* スマホ縦以外でページ幅の半分：スマホ縦は、ページ全幅 */
/*
.dl-cmn-half { border-right: 1px solid #000; border-bottom: 1px solid #000; border-left: 1px solid #000; display: inline-block; width: 468px; background: #E7E7E7; }
.dl-cmn-half dt, .dl-cmn-half dd { padding: .6em 10px; border-top: 1px solid #000; display: block; float: left; }
.dl-cmn-half dt { width: 100px; clear: both; }
.dl-cmn-half dd { width: 328px; background: #FFF; }
@media screen and (max-width: 768px) {
.dl-cmn-half { width: 49%; }
.dl-cmn-half dt, .dl-cmn-half dd { padding: .6em 2%; }
.dl-cmn-half dt { width: 24%; }
.dl-cmn-half dd { width: 68%; }
}
@media screen and (max-width: 480px) {
.dl-cmn-half { width: 300px; }
.dl-cmn-half dt, .dl-cmn-half dd { padding: .6em 10px; }
.dl-cmn-half dt { width: 60px; }
.dl-cmn-half dd { width: 200px; }
}
*/
/* width : PCの半幅px値に固定版 */
/*
.dl-cmn-half-fix { border-right: 1px solid #999; border-bottom: 1px solid #999; border-left: 1px solid #999; display: inline-block; width: 468px; background: #E7E7E7; }
.dl-cmn-half-fix dt, .dl-cmn-half-fix dd { padding: .6em 10px; border-top: 1px solid #999; display: block; }
.dl-cmn-half-fix dt { width: 100px; clear: both; float: left; }
.dl-cmn-half-fix dd { margin-left: 100px; background: #FFF; }
.dl-cmn-half-fix-box{ width: 468px; border: 1px solid #999; border-top: none; margin-top: -5px; padding: 14px 14px 1px 14px; background: #fff; }
@media screen and (max-width: 768px) {
.dl-cmn-half-fix { width: 100%; }
.dl-cmn-half-fix dt, .dl-cmn-half-fix dd { padding: .6em 2%; }
.dl-cmn-half-fix dt { width: 30%; }
.dl-cmn-half-fix dd { margin-left: 30%; }
.dl-cmn-half-fix-box{ width: 100%; padding: 1px 2% 1px 2%; }
}
@media screen and (max-width: 580px) {
}
*/
.dl-cmn-border { width: 100%; }
.dl-cmn-border dt { margin: 2em 0 0 0; padding: 0; border-bottom: 1px solid #999; font-weight: bold; }
.dl-cmn-border dd { margin: 0.5em 0; }


/* table */
.cmn-table{	width:100%; border-collapse: collapse; border-left: 1px solid #ccc; border-top: 1px solid #ccc; margin: 0 auto; background: #FFF; }
.cmn-table th {	padding: .4em .2em .5em; border-right: 1px solid #ccc; box-shadow: 1px 1px 0 #FFF inset; font-weight: bold; text-align: center; background: rgba(230,81,0,.07); }
.cmn-table th img { vertical-align: middle;}
.cmn-table td {	border-right: 1px solid #ccc; padding: .4em .2em .5em; }
.cmn-table tr .cmn-table-row { background-color:#FDF7D2;}
.cmn-table th[scope="row"] { background-color:#F7F7F7; text-align:left; padding: 1em;}
.cmn-table tr:nth-child(2n){ background-color:#f9f9f9;}
.cmn-table tr{ border-bottom: 1px solid #ccc; }


/* COMMON - box ---------------- */
.cmn-box{ background: #EEE; border: 1px dotted #999; padding: 1em; }
.box-radius{ border-radius: 6px; }

/*
.box-200{ width: 200px; }
.box-300{ width: 300px; }
.box-half{ width: 450px; }
.box-980{ width: 980px; }
.box-bg-fff{ background: #FFF;}
.box-bg-eee{ background: #EEE;}
.box-bg-17{ background: #171719;}
.box-bg-333{ background: #333;}
@media screen and (max-width: 768px) {
.box-980{ width: 660px; }
}
@media screen and (max-width: 480px) {
.box-half{ width: 100%; }
.cmn-box{ width: 90%; padding: 4%; }
.box-980{ width: 300px; }
}
*/
.youtubePcTab{ display: block; }
@media screen and (max-width: 480px) { .youtubePcTab{ display: none; } }

/* FORM ---------------- */
/*
fieldset{margin: 0 0 10px 0;padding: 0 20px 10px 20px;border: 1px solid #CCC;}
legend{margin: 0;padding: 0.5em 1em;border: 1px solid #CCC;color: #FFF;font-size: 16px;background-color: #171719;}
*/
/*
.label-ttl{ margin: 1em 0 0.5em 0; border-bottom: 1px dashed #999; display: block;}
input{margin: 0 0 0.7em 0;font-size: 14px;background-color: #F8F7F5;border: 1px solid #C3C3C3;}
textarea{ width: 95%; margin: 0 0 1em 0; border: 1px solid #999; background: #F8F7F5; font-size: 14px; }
.btn-submit{ padding: .4em 1em; }
fieldset #email,#email2 { width: 260px;}
@media screen and (max-width: 480px) {
fieldset { padding: 0 6px; width: 94%; }
input, textarea { width: 90%; }
}
*/
textarea{ width: 95% !important; }


/* -------------------------------------------------- */
/* PAGES -------------------------------------------- */
/* -------------------------------------------------- */

.animation{
	opacity : 0;
	visibility: hidden;
	transition: 2s;
	/* transform: translateY(50px); */
	transform: translateY(80px);
}
/*アニメーション要素までスクロールした時のスタイル*/
.active{
	opacity: 1;
	visibility: visible;
	transform: translateY(0);
}



/* PAGES - INDEX ---------------- */

.card-title{ padding: .1em .3em 0 !important; margin-bottom: 3px !important; background: none !important; border-bottom: 1px solid #FFF /*#E02130*/; text-shadow: 1px 1px 1px rgba(255,255,255,.9)/*(16,16,16,.9)*/; color: #333 !important;}


#top-box{ width: 920px; background: #FFF; padding: 40px 20px 20px 40px; }
@media screen and (max-width: 1080px) { #top-box{ width: 90%; padding: 40px 3% 20px; } }

.idx-service-txt:before{ content: "■"; color: #666; padding: 0 4px 0 0; text-align: left; }

.parallax-container {
	height: 50vh;
	min-height: 380px;
	line-height: 0;
	height: auto;
	color: rgba(255,255,255,.9);
}
.parallax-container .section {
    width: 100%;
}

@media only screen and (max-width : 992px) {
.parallax-container {
	min-height: 280px;
}
.parallax-container .section {
    position: absolute;
    top: 40%;
  }
}



/* -------------------------------------------------- */
/* PAGES - OTHERS ----------------------------------- */
/* -------------------------------------------------- */

/* ----- COLORs ----- */
/*
red #E02130(224,33,48)
yellow　#FAB243
*/
/* ----- COLORS ----- */


/* PAGES - VOICE ---------------- */
/*
.voice-ttl{ font-weight: bold; font-size: 1.2em; }
.voice-name{ margin: 0 0 2em 0; padding: 0 0 0 14px; font-weight: bold; background: url(../images/voice/voice_name_bg.gif) no-repeat 0 6px; }
*/

/* PAGES - FAQ ---------------- */
/*
.faq-q{ background: url(../images/faq/faq_q.gif) no-repeat top left; padding: 0 0 15px 50px; min-height: 32px;font-weight: bold; font-size: 1.2em; color: #000; }
.faq-a{ background: url(../images/faq/faq_a.gif) no-repeat; padding: 0 0 20px 50px; min-height: 32px; margin-bottom: 1em; }
*/
/*f059*/
.faq-q{ font-weight: bold; font-size: 1.2em; margin-bottom: .2em; }
.faq-q:before{ color: #fff; content: "Q"; margin-right: .2em; padding: .1em .3em 0 .3em; font-weight: normal; font-size: 1.68em; background-color: #ffab00; text-align: center; border-radius: 3px; }

.faq-a{ padding: 0 0 0 3.4em; margin-bottom: 2em; }


/* PAGES - WORKS ---------------- */
/*
.dl-works{ width: 630px; margin-bottom: 40px; float: left; overflow: hidden; border-bottom: 1px dotted #999; display: inline-block; background: #F0EFEB; }
.dl-works dt, .dl-works dd{ padding: .6em 10px; border-top: 1px dotted #999; display: block; float: left; }
.dl-works dt{ width: 180px; clear: both;}
.dl-works dd{ width: 410px; background: #FFF; }
@media screen and (max-width: 768px) {
.dl-works { width: 100%; }
.dl-works dt, .dl-works dd { padding: .6em 2%; }
.dl-works dt { width: 24%; }
.dl-works dd { width: 68%; }
}
@media screen and (max-width: 600px) {
.dl-works { width: 100%; }
.dl-works dt, .dl-works dd { padding: .6em 2%; width: 96%; }
}
*/

/* PAGES - ACCESS ---------------- */
/*
.map-box{ width: 100%; height: 450px; }
@media screen and (max-width: 768px) { .map-box{ width: 84%; margin: 0 8%; } }
@media screen and (max-width: 480px) { .map-box{ width: 300px; height: 300px; } }
*/