@charset "UTF-8";

span.wpcf7-list-item{display:inline-block; margin-right:1.5em; font-size:clamp(1.6rem, 1.6vw, 1.6vw);}
input[type=checkbox] {  transform: scale(1.5); margin:.5em;}

#poster .flex-item:nth-of-type(1){flex-basis:40%;}
#poster .flex-item:nth-of-type(2){flex-basis:55%;}
#contact.section .notice {margin-bottom:2rem;}
.contactcontents .flex-item:nth-of-type(1){flex-basis:60%;}

/*poster*/
#poster .flex-item:nth-of-type(1){flex-basis:40%;}
#poster .flex-item:nth-of-type(2){flex-basis:55%;}

#body {
background-color: #f3f3f3;
background-image: radial-gradient(#FFF 40%, transparent 30%);
background-size: 4px 4px;
}
#page-contents .section {padding: 6rem;}
#body .header h1 a {color: #EE001E;}
.img_bg_contact.lazyloaded{
background-image: url("../img/contact-image.png");
background-position: 95% 3vh;
background-size: 35% auto;
background-repeat: no-repeat;
}

.contactcontents .flex {display:flex; justify-content:space-between; flex-wrap:wrap;margin-bottom: 3rem;}
.contactcontents h3 {color:#EE001E; font-size:clamp(1.6rem,2.4vw,2.4rem);margin-bottom:1rem;line-height:1;}
.contactcontents dt {
width:100%;
background-color: #EE001E;
color:#fff;
display: flex;
align-items: center;
justify-content: center;
text-align:center;
font-weight:900;
line-height:2;
}
.contactcontents dd {
padding:1rem;
width:100%;
background-color: #F2f2f2;
margin: 0 0 10px 0;
}
.contactcontents p,
.contactcontents ul,
.contactcontents dl
{margin-bottom:3rem;}

.contactcontents p,
.contactcontents ul,
.contactcontents dl
{margin-bottom:3rem;}

#applyNetform {width:75%;}
#applyNetform ul{margin:0;}



@media only screen and (max-width: 960px){
.contactcontents {padding: 2rem !important;}
.img_bg_contact.lazyloaded {background-image: none;}
}
#contactform #privacy-policy {
height:18em;
overflow-y:scroll;
background:rgba(255,255,255,.6);
padding:2em;
margin-bottom:1.5em;
font-size:1.2rem;
box-shadow:0px 0px 4px rgba(200,200,200,.8) inset;
}
#contactform #privacy-policy h3 {
font-size:1.4rem;
background: #EE001E;
color:#FFF;
margin-bottom:1em;
padding:.2em .4em;
}
#contactform #privacy-policy h4{
margin-bottom:.15em;
color:#EE001E;
}
#contactform #privacy-policy p {
margin-bottom:1.25em;
}
#contactform #privacy-policy p:last-child{
margin-bottom:0;
}
.contactform p {margin:0;}
#contact p.attention{
margin-top:1rem;
}
#contact textarea{
overflow: auto;
vertical-align: top;
}
#contact input#accept{
width:auto;
}
.contactform {
max-width:100%;
}
.contactform .input-block {
background-color: rgba(255, 255, 255, 0.8);
border: solid 1px #aaa;
width: 100%;
padding: 1rem;
position: relative;
margin-bottom: 20px;
transition: all 0.3s ease-out;
}
.contactform .input-block.yoken {
text-align:center;
}
.contactform .input-block.focus {
background-color: #FFF;
border: solid 1px #EE001E;
}
.contactform .input-block.textarea {
height: auto;
}
.contactform .input-block.textarea .form-control {
height: auto;
resize: none;
}
.contactform .input-block label:nth-of-type(1) {
position: absolute;
left: 10px;
top: 50%;
transform: translateY(-50%);
display: block;
margin: 0;
font-weight: 500;
z-index: 1;
color: #aaa;
font-size: 1.6rem;
line-height: 1;
}
.contactform .input-block.textarea label {
position: absolute;
top:50%;
left: 50%;
transform: translate(-50%, -50%);
}
.contactform .input-block .form-control {
background-color: transparent;
padding: 0;
border: none;
border-radius: 0;
box-shadow: none;
height: auto;
position: relative;
z-index: 2;
font-size: 1.8rem;
display:block;
width:100%;
}
.contactform .input-block .form-control:focus label {
top: 0;
}
.contactform .square-button {
background-color: rgba(255, 255, 255, 0.8);
color: #fb2900;
font-size: 26px;
text-transform: uppercase;
text-align: center;
border-radius: 2px;
transition: all 0.3s ease;
padding: 0 60px;
height: 60px;
border: none;
width: 100%;
}
.contactform .square-button:hover, .contactform .square-button:focus {
background-color: white;
}
.contactform label span{font-size:12px;}

.contactform .input-block label.error {
position: absolute;
left: 50%;
top: 50%;
transform: translate(0, -50%);
color: red;
z-index: 2;
}
.contactform .input-block .form-control:focus label.error {
color:green;
}




/** お問い合わせ題名のセレクトボックス **/
.contactform .center {
position: relative;
display: block;
z-index:3;
}
.custom-select-wrapper {
position: relative;
display: inline-block;
user-select: none;
}
.custom-select-wrapper select {
display: none;
}
.custom-select {
position: relative;
display: block;
}
.custom-select-trigger {
position: relative;
display: block;
width: 100%;
padding: 0 60px 0 22px;
font-size: 1.8rem;
font-weight: 500;
color: #FFF;
line-height: 60px;
background: #EE001E;
border-radius: 4px;
cursor: pointer;
}
.custom-select-trigger:after {
position: absolute;
display: block;
content: '';
width: 10px; height: 10px;
top: 50%; right: 25px;
margin-top: -3px;
border-bottom: 1px solid #FFF;
border-right: 1px solid #FFF;
transform: rotate(45deg) translateY(-50%);
transition: all .4s ease-in-out;
transform-origin: 50% 0;
}
.custom-select.opened .custom-select-trigger:after {
margin-top: 3px;
transform: rotate(-135deg) translateY(-50%);
}
.custom-options {
position: absolute;
display: block;
top: 100%; left: 0;
margin: 15px 0;
border: 1px solid #b5b5b5;
border-radius: 4px;
box-shadow: 0 2px 1px rgba(0,0,0,.07);
background: #FFF;
transition: all .4s ease-in-out;
opacity: 0;
visibility: hidden;
pointer-events: none;
transform: translateY(-15px);
white-space: nowrap;
}
.custom-select.opened .custom-options {
opacity: 1;
visibility: visible;
pointer-events: all;
transform: translateY(0);
}
.custom-options:before {
position: absolute;
display: block;
content: '';
bottom: 100%; left: calc(50% - 4px);
width: 7px; height: 7px;
margin-bottom: -4px;
border-top: 1px solid #b5b5b5;
border-left: 1px solid #b5b5b5;
background: #FFF;
transform: rotate(45deg);
transition: all .4s ease-in-out;
}
.option-hover:before {
background: #f9f9f9;
}
.custom-option {
position: relative;
display: block;
padding: 0 16px;
border-bottom: 1px solid #b5b5b5;
font-size: 1.6rem;
line-height: 47px;
cursor: pointer;
transition: all .4s ease-in-out;
}
.custom-option:first-of-type {
border-radius: 4px 4px 0 0;
}
.custom-option:last-of-type {
border-bottom: 0;
border-radius: 0 0 4px 4px;
}
.custom-option:hover,
.custom-option.selection {
background: #eee;
color:#06B;
font-weight:800;
}
.custom-select.selected .custom-select-trigger {
font-weight:800;
}
.box_check {
text-align: center;
margin: 1em auto;
}
.box_check label {
display: inline-block;
cursor:pointer;
}
.screen-reader-response p{
color:#EE001E;
font-weight:800;
line-height:1.8;
}
.screen-reader-response p{
margin-bottom:0;
}

/*anime checkbox*/
.check-wrapper{
font-size:1.8rem;
}
.checkbox {
line-height: 30px;
position: relative;
cursor: pointer;
display: table;
}
.accept [type=checkbox] {
opacity: 0;
position: absolute;
}
.accept [type=checkbox]:checked ~ .custom-checkbox .first-line:before,
.accept [type=checkbox]:checked ~ .custom-checkbox .second-line:before {
height: 100%;
}
.accept [type=checkbox]:checked ~ .custom-checkbox .first-line:before {
transition: height 150ms ease-in-out 0ms;
}
.accept [type=checkbox]:checked ~ .custom-checkbox .second-line:before {
transition: height 150ms ease-in-out 150ms;
}
.accept .custom-checkbox {
width: 30px;
height: 30px;
border: 1px solid #ccc;
background: #FFF;
box-shadow: inset 1px 1px 1px 1px rgba 0, 0, 0, 0.1;
border-radius: 30px;
box-sizing: border-box;
position: relative;
display: inline-block;
vertical-align: top;
cursor:pointer;
}
.accept .custom-checkbox .first-line,
.accept .custom-checkbox .second-line {
display: block;
width: 4px;
position: absolute;
}
.accept .custom-checkbox .first-line:before,
.accept .custom-checkbox .second-line:before {
position: relative;
width: 100%;
height: 0;
content: "";
display: block;
background: #EE001E;
border-radius: 4px;
}
.accept .custom-checkbox .first-line {
height: 13px;
transform: rotate(-45deg);
top: 11px;
left: 6px;
}
.accept .custom-checkbox .first-line:before {
transition: height 150ms ease-in-out 150ms;
}
.accept .custom-checkbox .second-line {
height: 20px;
transform: rotate(225deg);
bottom: 3px;
left: 15px;
}
.accept .custom-checkbox .second-line:before {
transition: height 150ms ease-in-out 0ms;
}
.attention{font-size:12px;text-align: center;}
.require{
background-color: #EE001E;
color: #FFF;
font-size: 10px;
font-weight:800;
padding: 2px 4px;
border-radius: 3px;
text-align: center;
vertical-align:5%;
}
.button {
margin-top:2em;
text-align: center;
}
.button input#submit,.button input#reset {
display: inline-block;
background: #FFF;
color: #EE001E;
text-decoration: none;
cursor: pointer;
border: 2px solid #EE001E;
transition: all 0.4s;
width: 8em;
height: 3em;
opacity:1;
}
.button input#submit{
margin-left:1em;
width: 10em;
}
.button input#submit:disabled{
opacity:.3;
}