#main_body{
width: 100%;
margin: 0 auto;
color: #fff;
background: #000;
font-family: 'Hiragino Mincho ProN', 'Yu Mincho', 'YuMincho', MS P明朝;
}

#main_contents{
width: 100%;
max-width: 1200px;
margin: 0 auto;
padding: 0 0 100px;
box-sizing: border-box;
}

#main_contents img{
display: block;
width: 100%;
max-width: inherit !important;
}

#main_contents .fadein {
opacity: 0;
animation: fadein 3s ease forwards;
}
@keyframes fadein {
 100% {
 opacity: 1;
 }
}

#main_contents .fadein_contents01{
animation-delay: 5s;
}

#main_contents .fadein_contents02{
animation-delay: 6s;
}

#main_contents .octopus_image{
width: 100%;
margin: 0 auto;
position: relative;
}

#main_contents .octopus_image .image_pc{
display: block;
}

#main_contents .octopus_image .image_sp{
display: none;
}

#main_contents .top_comment{
width: 100%;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
text-align: center;
font-size: 50px;
line-height: 1.5em;
}

#main_contents .top_comment p{
animation-timing-function: ease;
animation-delay: 0s;
animation-iteration-count: 1;
animation-direction: alternate;
opacity: 0;
}

#main_contents .top_comment .inout01{
animation-name: smooth-fadein-out01;
animation-duration: 6s;
}
@keyframes smooth-fadein-out01{
0%{
 opacity: 0;
 }
50%{
 opacity: 1;
 }
91.7%{
 opacity: 1;
 }
100%{
 opacity: 0;
 }
}

#main_contents .top_comment .inout02{
animation-name: smooth-fadein-out02;
animation-duration: 4s;
animation-delay: 2s;
}
@keyframes smooth-fadein-out02{
0%{
 opacity: 0;
 }
75%{
 opacity: 1;
 }
87.5%{
 opacity: 1;
 }
100%{
 opacity: 0;
 }
}

#main_contents .btn_area{
width: 100%;
margin: 100px auto 0;
display: flex ;
justify-content: space-around;
padding: 0 5%;
box-sizing: border-box;
position: relative;
z-index: 10;
}

#main_contents .btn_area li{
width: 300px;
max-width: 32%;
margin: 0;
font-size: 20px;
line-height: 1em;
text-align: center;
font-weight: bold;
box-sizing: border-box;
}

#main_contents .btn_area li a{
display: inline-block;
width: 100%;
border: 3px solid #dbba73;
border-radius: 5px;
box-sizing: border-box;
padding: 40px 0;
color: #fff;
}

#main_contents .btn_area li a:first-letter {
font-size: 40px;
color: #dbba73;
}

#main_contents .btn_area .arrowbox{
position: relative;
display: flex;
box-sizing: border-box;
}

#main_contents .btn_area .arrowbox .arrow {
position: absolute;
top: 15px;
left: 50%;
z-index: -1;
}

#main_contents .btn_area .arrowbox .arrow::before,
#main_contents .btn_area .arrowbox .arrow::after {
box-sizing: border-box;
position: absolute;
display: block;
width: 2px;
height: 12px;
content: '';
transition: all 0.3s ease-in-out;
transform: translate(-50%, -50%) rotateZ(-60deg);
transform-origin: bottom right;
border-radius: 10px;
background: #fff;
}

#main_contents .btn_area .arrowbox .arrow::after {
transform: translate(-50%, -50%) rotateZ(60deg);
transform-origin: bottom left;
}

#main_contents .btn_area .arrowbox .bounce_kaitori {
animation: arrow-move 2s infinite ease-in-out;
}

#main_contents .btn_area .arrowbox .bounce_itaku {
animation: arrow-move 2s infinite ease-in-out;
animation-delay: 0.66s;
}

#main_contents .btn_area .arrowbox .bounce_inquiry {
animation: arrow-move 2s infinite ease-in-out;
animation-delay: 1.33s;
}
@keyframes arrow-move {
0%, 20%, 50%, 80%, 100% {
 transform: translateY(0);
 }
48% {
 transform: translateY(-8px);
 }
60% {
 transform: translateY(-4px);
 }
}

#main_contents .btn_area .slidein_kaitori{
transform: translateY(200%);
opacity: 0;
animation: slide-in-anim 1.5s ease-out forwards;
margin-top: -25%;
animation-delay: 4s;
}

#main_contents .btn_area .slidein_itaku{
transform: translateY(200%);
opacity: 0;
animation: slide-in-anim 1.5s ease-out forwards;
margin-top: -25%;
animation-delay: 4.25s;
}

#main_contents .btn_area .slidein_inquiry{
transform: translateY(200%);
opacity: 0;
animation: slide-in-anim 1.5s ease-out forwards;
margin-top: -25%;
animation-delay: 4.5s;
}
@keyframes slide-in-anim {
20% {
 opacity: 0;
 }
60% {
 transform: translateY(45%);
 }
75% {
 transform: translateY(52%);
 }
100% {
 opacity: 1;
 transform: translateY(50%);
 }
}

#main_contents #contents_area{
width: 100%;
margin: 150px auto 0;
padding: 0 5%;
box-sizing: border-box;
}

#main_contents #contents_area #A_kaitori,
#main_contents #contents_area #A_itaku{
padding-top: 50px;
margin: -50px 0 100px;
}

#main_contents #contents_area #A_inquiry{
padding-top: 50px;
margin-top: -50px;
}

#main_contents #contents_area .detail{
width: 100%;
margin: 0 auto;
border: 4px double #dbba73;
box-sizing: border-box;
padding: 50px;
font-size: 20px;
line-height: 1em;
}

#main_contents #contents_area .detail .detail_text{
width: 100%;
font-size: 30px;
line-height: 2em;
display: flex ;
justify-content: space-between;
flex-wrap: wrap;
align-items: center;
}

#main_contents #contents_area .detail .text_title{
width: 30%;
font-size: 30px;
line-height: 2em;
font-weight: bold;
}

#main_contents #contents_area .detail .text_title:first-letter {
font-size: 60px;
color: #dbba73;
}

#main_contents #contents_area .detail .text_explanation{
width: 70%;
padding: 0 0 0 0.2em;
font-size: 20px;
line-height: 1.3em;
text-align: justify;
}

#main_contents #contents_area .detail .detail_image{
width: 100%;
font-size: 30px;
line-height: 2em;
display: flex ;
justify-content: space-between;
flex-wrap: wrap;
align-items: center;
margin: 30px 0 0;
}

#main_contents #contents_area .detail .detail_image .image_box{
width: 30%;
box-sizing: border-box;
padding: 0;
}

#main_contents #contents_area .detail .detail_image .image_arrow{
width: 18px;
height: 18px;
border: 2px solid;
border-color: #fff #fff transparent transparent;
transform: rotate(45deg);
margin-left: -9px;
}

#main_contents #contents_area .detail .detail_inquiry{
width: 100%;
display: flex ;
justify-content: space-between;
flex-wrap: wrap;
align-items: center;
margin: 30px 0 0;
}

#main_contents #contents_area .detail .detail_inquiry .inquiry_box{
width: 24%;
box-sizing: border-box;
padding: 0;
text-align: center;
font-size: 16px;
line-height: 1em;
}

#main_contents #contents_area .detail .detail_inquiry .inquiry_box span{
display: block;
font-size: 26px;
line-height: 1em;
margin: 0 0 8px;
font-weight: bold;
}

#main_contents #contents_area .detail .detail_inquiry .inquiry_box p{
color: #dbba73;
background: #000;
box-sizing: border-box;
padding: 8px 0;
margin: 40px 0 0;
font-size: 34px;
line-height: 1em;
}

#main_contents #contents_area .detail .detail_inquiry .inquiry_box a{
width: 100%;
display: inline-block;
color: #dbba73;
background: #000;
box-sizing: border-box;
border-radius: 5px;
padding: 15px 20px;
border: 2px solid #dbba73;
margin: 40px 0 0;
font-size: 20px;
line-height: 1em;
word-break: break-word;
}

#main_contents #contents_area .detail .detail_inquiry .inquiry_box a:hover{
color: #000;
background: #dbba73;
opacity: 1;
}

#contents_area .detail .arrowbox{
position: relative;
display: flex;
box-sizing: border-box;
margin: 3px 0 0;
}

#contents_area .detail .arrowbox .arrow {
position: absolute;
top: 15px;
left: 50%;
z-index: -1;
}

#contents_area .detail .arrowbox .arrow::before,
#contents_area .detail .arrowbox .arrow::after {
box-sizing: border-box;
position: absolute;
display: block;
width: 2px;
height: 12px;
content: '';
transition: all 0.3s ease-in-out;
transform: translate(-50%, -50%) rotateZ(-60deg);
transform-origin: bottom right;
border-radius: 10px;
background: #fff;
}

#contents_area .detail .arrowbox .arrow::after {
transform: translate(-50%, -50%) rotateZ(60deg);
transform-origin: bottom left;
}

#contents_area .detail .arrowbox .bounce_tel {
animation: arrow-move 2s infinite ease-in-out;
}

#contents_area .detail .arrowbox .bounce_mail {
animation: arrow-move 2s infinite ease-in-out;
animation-delay: 0.5s;
}

#contents_area .detail .arrowbox .bounce_form {
animation: arrow-move 2s infinite ease-in-out;
animation-delay: 1.0s;
}

#contents_area .detail .arrowbox .bounce_download {
animation: arrow-move 2s infinite ease-in-out;
animation-delay: 1.5s;
}


@media only screen and (max-device-width: 1000px) {

#main_contents .top_comment{
font-size: 40px;
}

#main_contents #contents_area .detail .text_title{
font-size: 26px;
}

#main_contents #contents_area .detail .text_title:first-letter {
font-size: 40px;
}

#main_contents #contents_area .detail .detail_inquiry .inquiry_box span{
font-size: 22px;
}

#main_contents #contents_area .detail .detail_inquiry .inquiry_box a{
font-size: 16px;
}

#main_contents #contents_area .detail .detail_inquiry .inquiry_box p{
font-size: 30px;
}

#main_contents #contents_area .detail{
padding: 28px;
}
}


@media only screen and (max-device-width: 800px) {


#main_contents{
width: 100%;
max-width: 100%;
margin: 0 auto;
padding: 0 0 60px;
box-sizing: border-box;
}

#main_contents .octopus_image .image_pc{
display: none;
}

#main_contents .octopus_image .image_sp{
display: block;
}

#main_contents .top_comment{
font-size: 24px;
line-height: 2em;
}


#main_contents .btn_area{
margin: 60px auto 0;
}

#main_contents .btn_area li{
width: 30%;
font-size: 12px;
line-height: 1em;
}

#main_contents .btn_area li a{
display: block;
border: 2px solid #dbba73;
padding: 20px 0;
}

#main_contents .btn_area li a:first-letter {
font-size: 20px;
}

#main_contents .btn_area .arrowbox .arrow {
top: 8px;
}

#main_contents .btn_area .arrowbox .arrow::before,
#main_contents .btn_area .arrowbox .arrow::after {
height: 8px;
}
@keyframes arrow-move {
0%, 20%, 50%, 80%, 100% {
 transform: translateY(0);
 }
48% {
 transform: translateY(-4px);
 }
60% {
 transform: translateY(-2px);
 }
}

#main_contents #contents_area{
margin: 74px auto 0;
}

#main_contents #contents_area #A_kaitori,
#main_contents #contents_area #A_itaku{
padding-top: 30px;
margin: -30px 0 60px;
}

#main_contents #contents_area #A_inquiry{
padding-top: 30px;
margin-top: -30px;
}

#main_contents #contents_area .detail{
border: 4px double #dbba73;
padding: 20px 10px;
font-size: 10px;
line-height: 1em;
}

#main_contents #contents_area .detail .detail_text{
font-size: 12px;
line-height: 2em;
}

#main_contents #contents_area .detail .text_title{
width: 100%;
font-size: 18px;
line-height: 2em;
margin-bottom: 5px; 
}

#main_contents #contents_area .detail .text_title:first-letter {
font-size: 30px;
}

#main_contents #contents_area .detail .text_explanation{
width: 100%;
padding: 0;
font-size: 15px;
line-height: 1.3em;
}

#main_contents #contents_area .detail .detail_image{
width: 95%;
margin: 40px auto 0;
}

#main_contents #contents_area .detail .detail_image .image_box{
width: 100%;
}

#main_contents #contents_area .detail .detail_image .image_arrow{
width: 10px;
height: 10px;
transform: rotate(135deg);
margin: 20px auto 28px;
}

#main_contents #contents_area .detail .detail_inquiry{
margin: 0 auto;
}

#main_contents #contents_area .detail .detail_inquiry .inquiry_box{
width: 48%;
box-sizing: border-box;
padding: 0;
text-align: center;
font-size: 12px;
line-height: 1em;
margin: 40px 0 0;
}

#main_contents #contents_area .detail .detail_inquiry .inquiry_box span{
font-size: 18px;
line-height: 1em;
margin: 0 0 5px;
}

#main_contents #contents_area .detail .detail_inquiry .inquiry_box p{
padding: 14px 0;
margin: 30px 0 0;
font-size: 20px;
line-height: 1em;
}

#main_contents #contents_area .detail .detail_inquiry .inquiry_box a{
display: inline-block;
padding: 15px;
margin: 30px 0 0;
font-size: 14px;
line-height: 1em;
}

#contents_area .detail .arrowbox{
margin: 0;
}

#contents_area .detail .arrowbox .arrow {
position: absolute;
top: 12px;
}

#contents_area .detail .arrowbox .arrow::before,
#contents_area .detail .arrowbox .arrow::after {
height: 8px;
}