@charset "UTF-8";


/* ==========================================================================
   variable
============================================================================= */
:root {
	--main-color: #262727;
	--main-color-red: #AA2820;
	--main-color-darkred: #7c201a;
	--main-color-blue: #2A84BE;
	--main-color-darkblue: #20608a;
	--main-color-yellow: #e7b519;
	--main-color-darkyellow: #a58522;
	--main-color-gray: #7C7C7C;
	--main-color-lightgray: #DDDDDD;
	--main-color-link: #2A84BE;
	--bgcolor-lightgray: #efefef;
	--bgcolor-lightgray2: #F8F8F8;
	--textcolor-main: #000000;
}


/* ==========================================================================
   base
============================================================================= */

body {
	-ms-text-size-adjust: 100%;
	-webkit-text-size-adjust: 100%;/*iPhone font*/
	font-family: 'Noto Sans JP', sans-serif;
	/*font-family: "ヒラギノ角ゴ ProN W3", "Hiragino Kaku Gothic ProN", 游ゴシック, YuGothic, メイリオ, Meiryo, sans-serif;*/
	font-weight: 400;
	font-size: 16px;
	color: var(--textcolor-main);
	background-color: #ffffff;
}

@media only screen and (min-width: 768px){

}

@media only screen and (min-width: 1040px){

}

p { background-image:url(""); }

a:link{ color: var(--main-color-link); text-decoration: underline; }
a:visited{ color: var(--main-color-link); text-decoration: underline; }
a:active{ color: var(--main-color-link); text-decoration: underline; }
a:hover { color: var(--main-color-link); text-decoration: none; }

a {
    -webkit-transition: 0.5s;
    -moz-transition: 0.5s;
    -o-transition: 0.5s;
    transition: 0.5s;
}

a:hover {
    outline : none;
	-webkit-tap-highlight-color: rgba(0, 0, 0, 0);
	tap-highlight-color: rgba(0, 0, 0, 0);

	-webkit-transition: 0.5s;
	-moz-transition: 0.5s;
	-o-transition: 0.5s;
	transition: 0.5s;

	/*opacity: 0.7;*/
}

img {
    -webkit-transition: 0.5s;
    -moz-transition: 0.5s;
    -o-transition: 0.5s;
    transition: 0.5s;
}

a:hover img {
    -webkit-transition: 0.5s;
    -moz-transition: 0.5s;
    -o-transition: 0.5s;
    transition: 0.5s;

	-webkit-tap-highlight-color: rgba(0, 0, 0, 0);
	tap-highlight-color: rgba(0, 0, 0, 0);

	/*opacity: 0.7;*/
}

svg,
a:hover svg {
    -webkit-transition: 0.5s;
    -moz-transition: 0.5s;
    -o-transition: 0.5s;
    transition: 0.5s;
}

a[href^="tel:"] { cursor: default; }

ul { list-style-type: none; }

address { font-style: normal; }

/* ==========================================================================
   clearfix
============================================================================= */

.cf:after {
	content: "."; 
	display: block;
	clear: both;
	height: 0;
	visibility: hidden;
}

.cf {
	min-height: 1px;
}

* html .cf {
	height: 1px;
	/*\*//*/
	height: auto;
	overflow: hidden;
	/**/
}

/* ==========================================================================
   common
============================================================================= */
.txt-bold {font-weight: bold!important;}
.txt-normal {font-weight: normal!important;}
.font-Small {font-size: 0.7rem!important;}
.font-large {font-size: 1.4rem!important;}
.font90per {font-size: 90%!important;}
.font105per {font-size: 105%!important;}
.font110per {font-size: 110%!important;}
.font120per {font-size: 120%!important;}
.font130per {font-size: 130%!important;}
.font140per {font-size: 140%!important;}
.font150per {font-size: 150%!important;}

.txt-ct { text-align: center!important;}

.lh2 { line-height: 2em!important; }
.pt0 {padding-top: 0!important;}
.pt1 {padding-top: 1rem!important;}
.pt2 {padding-top: 2rem!important;}
.pb0 {padding-bottom: 0!important;}
.pb1 {padding-bottom: 1rem!important;}
.pb2 {padding-bottom: 2rem!important;}
.pb3 {padding-bottom: 3rem!important;}
.pb4 {padding-bottom: 4rem!important;}
.pb5 {padding-bottom: 5rem!important;}
.mt0 {margin-top: 0!important;}
.mt05 {margin-top: 0.5em!important;}
.mt1 {margin-top: 1rem!important;}
.mt2 {margin-top: 2rem!important;}
.mt3 {margin-top: 3rem!important;}
.mt4 {margin-top: 4rem!important;}
.mt5 {margin-top: 5rem!important;}
.mt6 {margin-top: 5rem!important;}
.mb0 {margin-bottom: 0!important;}
.mb05 {margin-bottom: 0.5rem!important;}
.mb1 {margin-bottom: 1rem!important;}
.mb2 {margin-bottom: 2rem!important;}
.mb3 {margin-bottom: 3rem!important;}
.mb4 {margin-bottom: 4rem!important;}
.mb5 {margin-bottom: 5rem!important;}
.mb6 {margin-bottom: 6rem!important;}
.ml1 {margin-left: 1rem!important;}
.ml2 {margin-left: 2rem!important;}
.ml3 {margin-left: 3rem!important;}
.mr1 {margin-right: 1rem!important;}
.mr2 {margin-right: 2rem!important;}
.mr3 {margin-right: 3rem!important;}

.dpB { display: block!important; }



/*スマホのみ改行*/
@media only screen and (min-width: 768px){
	br.mbbr {
		display:none!important;
	}
}

/*スマホ・タブレットのみ改行*/
@media only screen and (min-width: 1040px){
	br.mbtbbr {
		display:none!important;
	}
}

/*タブレット以上のみ改行*/
br.tbbr {
	display: none;
}

@media only screen and (min-width: 768px){
	br.tbbr {
		display: inline;
	}
}

/*PC以上のみ改行*/
br.dtbr {
	display: none;
}

@media only screen and (min-width: 1040px){
	br.dtbr {
		display: inline;
	}
}

/*モバイルのみ消す（インライン）*/
.mbNone {
	display: none;
}

@media only screen and (min-width: 768px){
	.mbNone {
		display: inline;
	}
}

/*モバイルのみ表示（インライン）*/
.mbVisible {

}

@media only screen and (min-width: 768px){
	.mbVisible {
		display: none;
	}
}


select, textarea, [type="text"], [type="password"], [type="datetime"], [type="datetime-local"], [type="date"], [type="month"], [type="time"], [type="week"], [type="number"], [type="email"], [type="url"], [type="search"], [type="tel"], [type="color"], .uneditable-input {
	display: inline-block;
	padding: 0.5em 0.5em;
	width: 50%;
	/*-webkit-border-radius: 5px;
	-moz-border-radius: 5px;
	border-radius: 5px;*/
	vertical-align: middle;
	font-size: 90%;

    border: none;
    background-color: #fff;
}

select {
	-webkit-appearance: none;
	-moz-appearance: none;
	appearance: none;
	padding-right: 25px;
}

input[type="reset"]:focus,
input[type="submit"]:focus {
	outline: 0;
}

/*youtube貼り付け用*/
.movieBox {
	position: relative;
	padding-bottom: 56.25%; /*アスペクト比 16:9の場合の縦幅*/
	height: 0;
	overflow: hidden;
}
 
.movieBox iframe {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
}

.paling {
	padding: 1em;
	border: 1px solid #000000;
}

.strikethrough {
	text-decoration: line-through 2px solid var(--main-color-red);
}

.textColorRed {
	color: var(--main-color-red);
}

/* ==========================================================================
   base
============================================================================= */

body {

}

img,
svg {
	width: 100%;
	max-width: 100%;
	height: auto;
}

@media screen and (min-width: 600px) {
	.w600 {
		max-width: 600px!important;
		margin-left: auto!important;
		margin-right: auto!important;
	}
}

@media screen and (min-width: 750px) {
	.w750 {
		max-width: 750px!important;
		margin-left: auto!important;
		margin-right: auto!important;
	}
}

@media screen and (min-width: 800px) {
	.w800 {
		max-width: 800px!important;
		margin-left: auto!important;
		margin-right: auto!important;
	}
}

@media screen and (min-width: 1040px) {
	.w1040 {
		max-width: 1040px!important;
		margin-left: auto!important;
		margin-right: auto!important;
	}
}

@media screen and (min-width: 1200px) {
	.w1200 {
		max-width: 1200px!important;
		margin-left: auto!important;
		margin-right: auto!important;
	}
}

@media screen and (min-width: 1400px) {
	.w1400 {
		max-width: 1400px!important;
		margin-left: auto!important;
		margin-right: auto!important;
	}
}

@media screen and (min-width: 1580px) {
	.w1580 {
		max-width: 1580px!important;
		margin-left: auto!important;
		margin-right: auto!important;
	}
}


/* ==========================================================================
   main
============================================================================= */

.sec-main {
	position: relative;
	min-height: 100vh;
}

.section-inner {
	width: 100%;
	position: absolute;
	top: 50%;
	transform: translateY(-50%);
	font-size: 1rem;
	letter-spacing: 0.1em;
	padding: 0 1em;
}

.section-inner .title {

}

.section-inner .title .logo {
	max-width: 250px;
	width: 80%;
	margin-bottom: 1.25em;
}

.section-inner .title .site-name span {
	display: inline-block;
	font-size: 0.8em;
    letter-spacing: 0.1em;
    line-height: 1;
    padding: 0.5em 0.75em;
    color: #ffffff;
    background-color: var(--main-color);
}

.section-inner .title .product-name {
	font-size: 1.2rem;
}


.form-body {

}

.form-body .form-message {
	font-weight: bold;
	color: var(--main-color-red);
}

.form-body .input-wrap {
	position: relative;
	margin: 1.5em auto 0.5em auto;
	padding: 0 0 2em 0;
}

.form-body input {
	max-width: 20em;
	width: 90%;
	border: 1px solid var(--main-color);
	border-radius: 0.5em;
}

.form-body .validation {
	position: absolute;
	width: 100%;
	bottom: 0;
}

.form-body .validation p {
	color: #ff0000;
}

.form-body .form-btn {
	margin-top: 1.75rem;
}

.form-body .form-btn button {
	font-size: 1rem;
	font-weight: 700;
	line-height: 1.5em;
	position: relative;
	display: inline-block;
	padding: 0.5em 2em 0.5em 2em;
	cursor: pointer;
	-webkit-user-select: none;
	-moz-user-select: none;
	-ms-user-select: none;
	user-select: none;
	-webkit-transition: all 0.3s;
	transition: all 0.3s;
	text-align: center;
	vertical-align: middle;
	text-decoration: none;
	letter-spacing: 0.1em;
	color: var(--main-color);
	border-radius: 0.5em;
	top: 0;
	box-shadow: 0 3px 0 0 var(--main-color-darkblue);
}

.form-body .form-btn button:hover {
	opacity: 0.9;
	top: 3px;
	box-shadow: 0 0 0 0 var(--main-color-darkblue);
}

@media screen and (min-width: 768px) {
	.form-body .form-btn button {
		font-size: 1.1rem;
	}
}

.form-body .form-btn button.btn--blue {
	color: #ffffff;
	background-color: var(--main-color-blue);
	box-shadow: 0 5px 0 0 var(--main-color-darkblue);
}

.form-body .form-btn button.btn--blue:hover {
	top: 5px;
	box-shadow: 0 0 0 0 var(--main-color-darkblue);
}

.form-body .form-btn button.btn--radius {
	border-radius: 100vh;
}

.policy {
	font-size: 80%;
}

/* ==========================================================================
   vue
============================================================================= */

[v-cloak] {
	display: none;
}