@charset "utf-8";

/* reset
------------------------------------------------------------------------------------ */
html, body, div, span, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
abbr, address, cite, code,
del, dfn, em, img, ins, kbd, q, samp,
small, strong, sub, sup, var,
b, i,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, figcaption, figure, 
footer, header, hgroup, menu, nav, section, summary,
time, mark, audio, video {
	margin:0;
	padding:0;
	border:0;
	outline:0;
	font-size:100%;
	font-weight:normal;
	vertical-align:baseline;
	background:transparent;
}
body {
	position: relative;
	font-family: "Noto Sans JP", sans-serif;
	color:#111;
	font-size:16px;
	line-height:175%;
	font-weight:400;
	letter-spacing: 0.05rem;
	font-feature-settings: "palt";
	background-color:#FFF;
	-webkit-text-size-adjust: 100%;
}
article,aside,details,figcaption,figure,footer,header,hgroup,menu,nav,section { 
	display:block;
}
blockquote, q {
	quotes:none;
}
blockquote:before, blockquote:after, q:before, q:after {
	content:'';
	content:none;
}
del {
	text-decoration: line-through;
}
abbr[accordionTitle], dfn[accordionTitle] {
	border-bottom:1px dotted;
	cursor:help;
}
img{
	width:100%;
	max-width: 100%;
	height: auto;
	vertical-align:bottom;
	margin:0;
	padding:0;
	border:0;
}
table {
	border-collapse:collapse;
	border-spacing:0;
}
th{
	font-weight:normal;
	text-align:left;
}
li{
	list-style:none;
}
hr{
	clear:both;
	color:#666;
}
input, select {
	vertical-align:middle;
}


/* txtバリエーション
------------------------------------------------------------------------------------ */
.textSmall {font-size: 0.875rem; line-height: 175%;}
.textCaution {font-size: 0.5rem; vertical-align: top;}
.strong {font-weight:bold;}
.colorMain {color:#c00d1c;}
.colorRed {color:#c00d1c;}
.colorWhite {color:#FFF;}
.align-l {text-align:left;}
.align-r {text-align:right;}
.align-c {text-align:center;}
.ftB {font-weight: bold;}

/* width
------------------------------------------------------------------------------------ */
.w30 {width:30px!important;}
.w40 {width:40px!important;}
.w50 {width:50px!important;}
.w60 {width:60px!important;}
.w70 {width:70px!important;}
.w80 {width:80px!important;}
.w90 {width:90px!important;}
.w100 {width:100px!important;}
.w110 {width:110px!important;}
.w115 {width:115px!important;}
.w120 {width:120px!important;}
.w123 {width:123px!important;}
.w130 {width:130px!important;}
.w140 {width:140px!important;}
.w150 {width:150px!important;}
.w152 {width:152px!important;}
.w160 {width:160px!important;}
.w170 {width:170px!important;}
.w180 {width:180px!important;}
.w190 {width:190px!important;}
.w200 {width:200px!important;}
.w210 {width:210px!important;}
.w220 {width:220px!important;}
.w230 {width:230px!important;}
.w240 {width:240px!important;}
.w246 {width:246px!important;}
.w250 {width:250px!important;}
.w260 {width:260px!important;}
.w270 {width:270px!important;}
.w280 {width:280px!important;}
.w290 {width:290px!important;}
.w300 {width:300px!important;}
.w310 {width:310px!important;}
.w320 {width:320px!important;}
.w325 {width:325px!important;}
.w330 {width:330px!important;}
.w335 {width:335px!important;}
.w340 {width:340px!important;}
.w350 {width:350px!important;}
.w360 {width:360px!important;}
.w370 {width:370px!important;}
.w380 {width:380px!important;}
.w390 {width:390px!important;}
.w400 {width:400px!important;}
.w405 {width:405px!important;}
.w410 {width:410px!important;}
.w415 {width:415px!important;}
.w420 {width:420px!important;}
.w430 {width:430px!important;}
.w440 {width:440px!important;}
.w450 {width:450px!important;}
.w460 {width:460px!important;}
.w470 {width:470px!important;}
.w480 {width:480px!important;}
.w490 {width:490px!important;}
.w500 {width:500px!important;}
.w630 {width:630px!important;}
.w50p {width:50%!important;}


/* margin
------------------------------------------------------------------------------------ */
.noMgTop{margin-top:0 !important;}
.noMgRight{margin-right:0 !important;}
.noMgBottom{margin-bottom:0 !important;}
.noMgLeft{margin-left:0 !important;}

.margin-5{margin:5px !important;}
.margin-10{margin:10px !important;}
.margin-15{margin:15px !important;}
.margin-20{margin:20px !important;}
.margin-25{margin:25px !important;}
.margin-30{margin:30px !important;}
.margin-35{margin:35px !important;}
.margin-40{margin:40px !important;}
.margin-45{margin:45px !important;}
.margin-50{margin:50px !important;}
.margin-100{margin:100px !important;}

.margin-t5{margin-top:5px !important;}
.margin-t10{margin-top:10px !important;}
.margin-t15{margin-top:15px !important;}
.margin-t20{margin-top:20px !important;}
.margin-t25{margin-top:25px !important;}
.margin-t30{margin-top:30px !important;}
.margin-t35{margin-top:35px !important;}
.margin-t40{margin-top:40px !important;}
.margin-t45{margin-top:45px !important;}
.margin-t50{margin-top:50px !important;}
.margin-t100{margin-top:100px !important;}

.margin-r5{margin-right:5px !important;}
.margin-r10{margin-right:10px !important;}
.margin-r15{margin-right:15px !important;}
.margin-r20{margin-right:20px !important;}
.margin-r25{margin-right:25px !important;}
.margin-r30{margin-right:30px !important;}
.margin-r35{margin-right:35px !important;}
.margin-r40{margin-right:40px !important;}
.margin-r50{margin-right:50px !important;}
.margin-r100{margin-right:100px !important;}

.margin-b5{margin-bottom:5px !important;}
.margin-b10{margin-bottom:10px !important;}
.margin-b15{margin-bottom:15px !important;}
.margin-b20{margin-bottom:20px !important;}
.margin-b25{margin-bottom:25px !important;}
.margin-b30{margin-bottom:30px !important;}
.margin-b35{margin-bottom:35px !important;}
.margin-b40{margin-bottom:40px !important;}
.margin-b45{margin-bottom:45px !important;}
.margin-b50{margin-bottom:50px !important;}
.margin-b100{margin-bottom:100px !important;}

.margin-l5{margin-left:5px !important;}
.margin-l10{margin-left:10px !important;}
.margin-l15{margin-left:15px !important;}
.margin-l20{margin-left:20px !important;}
.margin-l25{margin-left:25px !important;}
.margin-l30{margin-left:30px !important;}
.margin-l35{margin-left:35px !important;}
.margin-l40{margin-left:40px !important;}
.margin-l45{margin-left:45px !important;}
.margin-l50{margin-left:50px !important;}
.margin-l100{margin-left:100px !important;}


/* padding
------------------------------------------------------------------------------------ */
.padding-5{padding:5px !important;}
.padding-10{padding:10px !important;}
.padding-15{padding:15px !important;}
.padding-20{padding:20px !important;}
.padding-25{padding:25px !important;}
.padding-30{padding:30px !important;}
.padding-35{padding:35px !important;}
.padding-40{padding:40px !important;}

.padding-t5{padding-top:5px !important;}
.padding-t10{padding-top:10px !important;}
.padding-t15{padding-top:15px !important;}
.padding-t20{padding-top:20px !important;}
.padding-t25{padding-top:25px !important;}
.padding-t30{padding-top:30px !important;}
.padding-t35{padding-top:35px !important;}
.padding-t40{padding-top:40px !important;}

.padding-r5{padding-right:5px !important;}
.padding-r10{padding-right:10px !important;}
.padding-r15{padding-right:15px !important;}
.padding-r20{padding-right:20px !important;}
.padding-r25{padding-right:25px !important;}
.padding-r30{padding-right:30px !important;}
.padding-r35{padding-right:35px !important;}
.padding-r40{padding-right:40px !important;}

.padding-b5{padding-bottom:5px !important;}
.padding-b10{padding-bottom:10px !important;}
.padding-b15{padding-bottom:15px !important;}
.padding-b20{padding-bottom:20px !important;}
.padding-b25{padding-bottom:25px !important;}
.padding-b30{padding-bottom:30px !important;}
.padding-b35{padding-bottom:35px !important;}
.padding-b40{padding-bottom:40px !important;}

.padding-l5{padding-left:5px !important;}
.padding-l10{padding-left:10px !important;}
.padding-l15{padding-left:15px !important;}
.padding-l20{padding-left:20px !important;}
.padding-l25{padding-left:25px !important;}
.padding-l30{padding-left:30px !important;}
.padding-l35{padding-left:35px !important;}
.padding-l40{padding-left:40px !important;}


/* border solid
------------------------------------------------------------------------------------ */
.borderS {border:1px solid #CCC;}
.borderS-t {border-top:1px solid #CCC;}
.borderS-r {border-right:1px solid #CCC;}
.borderS-b {border-bottom:1px solid #CCC;}
.borderS-l {border-left:1px solid #CCC;}


/* border dotted
------------------------------------------------------------------------------------ */
.borderD {border:1px dotted #CCC;}
.borderD-t {border-top:1px dotted #CCC;}
.borderD-r {border-right:1px dotted #CCC;}
.borderD-b {border-bottom:1px dotted #CCC;}
.borderD-l {border-left:1px dotted #CCC;}


/* listバリエーション
------------------------------------------------------------------------------------ */
ul.list-disc li {
	list-style-type: disc;
	margin-left: 1em;
}
ol.list-decimal li {
	list-style-type: decimal;
	margin-left: 1.5em;
}


/* 要編集
------------------------------------------------------------------------------------ */
a {
	text-decoration: none !important;
	color: inherit;
}
/* telリンク */
a[href^="tel"] {
	text-decoration: none !important;
	color: inherit;
	-webkit-text-decoration-color: transparent; /* iOS Safari対策 */
	-webkit-tap-highlight-color: transparent;   /* タップ時の青ハイライト消す */
}
a:link, a:visited {
	color:#111;
	text-decoration:none;
}
a:hover, a:active, a:visited:hover {
	color:#111;
	text-decoration:none;
}


/* メールフォームのデフォルト設定を全てクリア
------------------------------------------------------------------------------------ */
input,
button,
select,
textarea,
input[type='checkbox'] {
	-webkit-appearance: none;
	-moz-appearance: none;
	appearance: none;
	border: none;
	border-radius: 0;
	font: inherit;
	outline: none;
}
textarea {
	resize: vertical;
}
input[type='submit'],
input[type='button'],
input[type='radio'],
input[type='button'],
button,
select {
	cursor: pointer;
}
select::-ms-expand {
	display: none;
}


/* 【アニメーション】アニメーションスタートの遅延時間を決めるCSS
------------------------------------------------------------------------------------ */
.delay-time03 {
	animation-delay: 0.3s;
}
.delay-time06 {
	animation-delay: 0.6s;
}
.delay-time09 {
	animation-delay: 0.9s;
}
.delay-time12 {
	animation-delay: 1.2s;
}
.delay-time15 {
	animation-delay: 1.5s;
}
.delay-time18 {
	animation-delay: 1.8s;
}
.delay-time21 {
	animation-delay: 2.1s;
}
.delay-time24 {
	animation-delay: 2.4s;
}
.delay-time27 {
	animation-delay: 2.7s;
}
.delay-time30 {
	animation-delay: 3.0s;
}
.delay-time40 {
	animation-delay: 4.0s;
}
.delay-time60 {
	animation-delay: 6.0s;
}
.delay-time69 {
	animation-delay: 6.9s;
}


/* アコーディオン
------------------------------------------------------------------------------------ */
ul.accordionArea {
	width: 80%;
	margin: 0 auto;
}
ul.accordionArea li.accordionAreaList {
	border-bottom: solid 2px #e9e6e6;
	padding: 50px 20px 50px 30px;
}
ul.accordionArea li.accordionAreaList:first-child {
	border-top: solid 2px #e9e6e6;
}
div.accordionTitle {
	display: flex;
	justify-content: space-between;
	align-items: center;
	cursor: pointer;
	transition: all .5s ease;
}

/*＋と×ボタン*/
div.accordionTitle span {
	position: relative;
	content: '';
	width: 40px;
	height: 40px;
	border-radius: 50%;
	background: #FFF;
	border: 2px solid #c00d1c;
	box-sizing: border-box;
	transition: all .5s ease;
	flex-shrink: 0;
}
div.accordionTitle span::before,
div.accordionTitle span::after {
	position: absolute;
	top:48%;
	right: 9px;
	content:'';
	width: 18px;
	height: 2px;
	background-color: #c00d1c;
	transition: all .5s ease;
}
div.accordionTitle span::before {
	transform: rotate(0deg);
}
div.accordionTitle span::after {
	transform: rotate(90deg);
}
/*　closeというクラスがついたらデザイン変化　*/
div.accordionTitle.close span {
	background: #c00d1c;
}
div.accordionTitle.close span::before {
	transform: rotate(45deg);
	background-color: #FFF;
}
div.accordionTitle.close span::after {
	transform: rotate(-45deg);
	background-color: #FFF;
}

/*Question*/
.accordionTitle h3 {
	position: relative;
	align-items: center;
	font-size: 1.4rem;
	line-height: 1.75;
	font-weight: 500;
	padding-left: 50px;
	margin-right: 15px;
}
.accordionTitle h3::before {
	position: absolute;
	top: 3px;
	left: 0;
	content: "Q.";
	font-family: "Poppins", sans-serif;
	font-size: 2rem;
	line-height: 1;
	font-weight: bold;
	margin-right: 15px;
}

/*アコーディオンで現れるエリア*/
div.accordionBody {
	display: none;/*はじめは非表示*/
	margin-top: 20px;
}

/*Answer*/
div.accordionBody div.answer {
	position: relative;
	padding-left: 50px;
	margin-top: 5px;
}
div.accordionBody div.answer::before {
	position: absolute;
	top: 4px;
	left: 0;
	content: "A.";
	font-family: "Poppins", sans-serif;
	font-size: 2rem;
	line-height: 1;
	font-weight: bold;
	color: #c00d1c;
	margin-right: 15px;
}
div.accordionBody div.answer div.answerInner p.answerTextStar {
	font-size: .875rem;
	line-height: 1.75;
	margin-top: 5px;
}


@media screen and (max-width:768px) {
	ul.accordionArea {
		width: 100%;
	}
	ul.accordionArea li.accordionAreaList {
		border-bottom: solid 2px #e9e6e6;
		padding: 20px 5px;
	}
	div.accordionTitle span {
		width: 34px;
		height: 34px;
	}
	div.accordionTitle span::before,
	div.accordionTitle span::after {
		right: 6px;
	}
	.accordionTitle h3 {
		font-size: 1.125rem;
		line-height: 1.5;
		padding-left: 35px;
		margin-right: 10px;
	}
	.accordionTitle h3::before {
		font-size: 1.5rem;
	}
	div.accordionBody div.answer {
		padding-left: 35px;
	}
	div.accordionBody div.answer::before {
		font-size: 1.5rem;
	}
}


/* 【アニメーション】下からフェードイン
------------------------------------------------------------------------------------ */
.fadeInUpTrigger {
	opacity: 0;
}
.fadeUp {
	animation-name:fadeUpAnime;
	animation-duration:0.75s;
	animation-fill-mode:forwards;
	opacity: 0;
}
@keyframes fadeUpAnime{
	from {
		opacity: 0;
		transform: translateY(100px);
	}
	to {
		opacity: 1;
		transform: translateY(0);
	}
}


/* 【アニメーション】テキストの動き -背景色が伸びて出現（左から右）-
------------------------------------------------------------------------------------ */
/*全共通*/
.bgextend {
	animation-name:bgextendAnimeBase;
	animation-duration:1s;
	animation-fill-mode:forwards;
	animation-delay: 0.6s;
	position: relative;
	overflow: hidden;/*　はみ出た色要素を隠す　*/
	opacity:0;
}
@keyframes bgextendAnimeBase {
	0% {
		opacity:0;
	}
	100% {
		opacity:1;
	}
}

/*中の要素*/
.bgappear {
	animation-name:bgextendAnimeSecond;
	animation-duration:1s;
	animation-delay: 1.2s;
	animation-fill-mode:forwards;
	opacity: 0;
}
@keyframes bgextendAnimeSecond {
	0% {
		opacity: 0;
	}
	100% {
		opacity: 1;
	}
}

/*左から右*/
.bgLRextend::before {
	animation-name:bgLRextendAnime;
	animation-duration:1s;
	animation-fill-mode:forwards;
	animation-delay: 0.6s;
	content: "";
	position: absolute;
	width: 100%;
	height: 100%;
	transform:scaleX(0);
}
@keyframes bgLRextendAnime {
	0% {
		transform-origin:left;
		transform:scaleX(0);
	}
	50% {
		transform-origin:left;
		transform:scaleX(1);
	}
	50.001% {
		transform-origin:right;
	}
	100% {
		transform-origin:right;
		transform:scaleX(0);
	}
}

/* スクロールをしたら出現する要素にはじめに透過0を指定　*/
.bgappearTrigger,
.bgLRextendTrigger {
	opacity: 0;
}


/* 【アニメーション】コンテンツの動き 下からフェードイン
------------------------------------------------------------------------------------ */
.fadeInUpTrigger {
	opacity: 0;
}
.fadeInUp {
	animation-name:fadeInUpAnime;
	animation-duration:0.75s;
	animation-fill-mode:forwards;
	opacity: 0;
}
@keyframes fadeInUpAnime{
	from {
		opacity: 0;
		transform: translateY(100px);
	}
	to {
		opacity: 1;
		transform: translateY(0);
	}
}


/* 【アニメーション】コンテンツの動き じわっと出現
------------------------------------------------------------------------------------ */
.blur{
	animation-name:blurAnime;
	animation-duration:1s;
	animation-fill-mode:forwards;
}

@keyframes blurAnime{
	from {
		filter: blur(10px);
		transform: scale(1.02);
		opacity: 0;
	}
	to {
		filter: blur(0);
		transform: scale(1);
		opacity: 1;
	}
}
.blurTrigger,
.blurTriggerAuto {
	opacity: 0;
}


/* 【アニメーション】左から伸びる帯のテキスト
------------------------------------------------------------------------------------ */
.obiText {
}
.obiText span.obiTextWrapper {
}
.obiText span.obiTextWrapper:before {
	animation-name:obiTextExtend;
	animation-duration:0.5s;
	animation-fill-mode: both;
	animation-delay: inherit;
}
@keyframes obiTextExtend{
	from {
		transform: scaleX(0);
		transform-origin: left center;
	}
	to {
		transform: scaleX(1);
		transform-origin: left center;
	}
}
.obiText span.workHeadMvTextInner {
	animation-name:obiTextFadeIn;
	animation-duration:0.7s;
	animation-fill-mode: both;
	animation-delay: inherit;
	opacity: 0;
}
@keyframes obiTextFadeIn{
	from {
		opacity: 0;
	}
	to {
		opacity: 1;
	}
}