@charset "utf-8";
* {
box-sizing: border-box;
}
@font-face {
font-family: 'Frutiger';
font-style: normal;
font-weight: normal;
src: local('Frutiger'), url('Frutiger.woff') format('woff');
}


@font-face {
font-family: 'Frutiger Bold';
font-style: normal;
font-weight: normal;
src: local('Frutiger Bold'), url('Frutiger_bold.woff') format('woff');
}

body {
font-family: 'Noto Sans JP', 'Hiragino Sans', 'ヒラギノ角ゴシック', 'Hiragino Kaku Gothic Pro', 'ヒラギノ角ゴ Pro W3', 'メイリオ', 'Meiryo', sans-serif;
font-size: 16px;
line-height: 27px;
}

.content{
max-width: 1080px;
width: 100%;
margin: 0 auto;
text-align: left;
}

a,
a:link {
color: #000;
text-decoration: none;
}

a:hover,
a:active {
color: #000;
text-decoration: none;
}

a:visited {
color: #000;
text-decoration: none;
}

.o-header__anchors a{ color:#000000;}
.o-header__anchors a:link{ color:#000000;}
.o-header__anchors a:visited{ color:#000000;}
.o-footer-links a{color:#fff;}
.o-footer-links a:link{color:#fff;}
.o-footer-links a:visited{color:#fff;}
.o-menu-content a{color:#fff;}
.o-menu-content a:link{color:#fff}
.o-menu-content a:visited{color:#fff}
img  {
max-width: 100%;
vertical-align: top;
border-style: none;
}
.dp_pc{
display: block;
}
.dp_sp{
display: none;
}

.dp_sa{
display: none;
}
.dp_s{
display: none;
}

.dp_topmain{
display: block;
position: relative;
}

.dp_topmain_sp{
display: none;
}

@media (max-width: 768px){
.dp_sp{
display: block;
}
.dp_pc{
display: none;
}
.dp_sa{
display: none;
}
.dp_s{
display: none;
}
.dp_topmain{
display: none;
}

.dp_topmain_sp{
display: block;
}
}

@media (max-width: 640px){
.dp_pc{
display: none;
}
.dp_sp{
display: block;
}
.dp_sa{
display: block;
}
.dp_s{
display: block;
}

}


.al_left{
text-align: left;
}
.al_right{
text-align: right;
}
.al_center
{
text-align: center;
}

@media (max-width: 768px){
.al_left{
text-align: center;
}
.al_right{
text-align: center;
}
}
.frtgr_b{
font-family:'Frutiger Bold';
}
.frtgr_r{
font-family:'Frutiger';
}

.section_title_mode{
color: #009AA4;
/*background: linear-gradient(to bottom, #b2d850 0%, #009AA4 100%);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;*/
}
.section_title_mode.active {
opacity: 1;
-webkit-transform: translateY(0px);
transform: translateY(0px);
}
.marker {
background: linear-gradient(transparent 50%, #C2F8D6 50%);
font-weight: 600;
}
/*************************************************
MainArea
*************************************************/

.Mainph {
position: relative;
background: url("../img/main_sisetsu.jpg") right top no-repeat;
background-size: 130%;
height: 530px;
color: #ffffff;
-webkit-text-size-adjust: none;
text-align: center;
margin-top: 40px;
}
.CVside{
background-size: auto 100%;
width: 308px;
height: 530px;
text-align: center;
padding: 15px 0 10px 0;
float: left;
}

@media (max-width: 1120px){
.Mainph {
position: relative;
background: url("../img/main_sisetsu.jpg") right top no-repeat;
background-size: 135%;
height: 530px;
color: #ffffff;
-webkit-text-size-adjust: none;
text-align: center;
}

}


@media (max-width: 768px){
.Mainph {
position: relative;
background: linear-gradient(0deg, rgba(0, 0, 0, 0.8),rgba(0, 0, 0, 0.3),rgba(0, 0, 0, 0.2),rgba(256, 256, 256, 0),rgba(256, 256, 256, 0)),url("../img/main_sisetsu_sp.jpg") right top no-repeat;
background-size: cover;
height: 700px;
color: #ffffff;
-webkit-text-size-adjust: none;
text-align: center;
}
.CVside{
background:none;
width: 80%;
text-align: left;
padding: 0 0 10px 15px;
float: left;
}
}
@media (max-width: 478px){
.Mainph {
position: relative;
background: linear-gradient(0deg, rgba(0, 0, 0, 0.8),rgba(0, 0, 0, 0.3),rgba(0, 0, 0, 0.2),rgba(256, 256, 256, 0),rgba(256, 256, 256, 0)),url("../img/main_sisetsu_sp.jpg") right top no-repeat;
background-size: auto 100%;
height: 500px;
color: #ffffff;
-webkit-text-size-adjust: none;
text-align: center;
}
.CVside{
background:none;
/* width: 50%;*/
text-align: left;
padding: 0 0 0 15px;
float: left;
}
}
.Mainph .content{
max-width:1025px;
width: 100%;
margin: 0 auto;
text-align: left;
}


/*************************************************
Button
*************************************************/
.fv-cv_bt
{
display: block;
width:254px;
height: 56px;
margin: 0 auto;
}
.fv-cv{
display: block;
width:254px;
height: 56px;
text-align: center;
font-size: 0;
line-height: 1;
padding:8px 0 0 0;
background-color: #009AA4;
-webkit-box-shadow: 0 3px 0 0 #02666c;
box-shadow: 0 3px 0 0 #02666c;
border-radius: 3px;
}


.fv-cv-mv{
display: block;
width:417px;
height: 88px;
text-align: center;
font-size: 0;
line-height: 1;
padding:0;
margin: 20px 0 0 0;
}

.fvbt{
max-width:90%;
}
.fv-cv:hover {
-webkit-transform:translateY(3px);transform:translateY(3px);-webkit-box-shadow:0 0 0 0 #008573;box-shadow:0 0 0 0 #008573;
}
.fv-cv-mv:hover {
background: url("../img/bt_yoyaku_on.png") center center no-repeat;
}
.fv-cv-mv:hover img {
display: none;
}

@media (max-width: 768px){
.fv-cv_bt
{
margin: 0 0 0 0;
display: block;
width:200px;
height: 50px;
}

}
@media (max-width: 478px){
.fv-cv_bt
{
margin: 0 0 0 0;
display: block;
width:200px;
height: 50px;
}
.fv-cv{
display: block;
width:200px;
height: 50px;
padding:10px 0 0 0;
}
}
.o-cv {
margin: 0 auto;
position: relative;
display: block;
text-align: center;
font-size: 0;
line-height: 1;
padding: 28px 0 28px 195px;
width: 740px;
background-position:right 22px center;
background-size: 30px 30px;
}
@media (max-width: 768px){
.o-cv {
margin: 50px auto 0 auto;
padding: 38px 44px 18px 25px;
width: 80%;
background-position: right 12px bottom 42px;
}
}
@media (max-width: 468px){
.o-cv {
margin: 70px auto 0 auto;
padding: 18px 44px 8px 25px;
width: 80%;
background-position: right 12px bottom 8px;
}
}


h1{
color: #fff;
font-size: 38px;
padding: 3px 15px;
line-height: 1.15;
text-shadow    :
1px  1px 3px rgba(85, 65, 29, 0.1),
-1px  1px 3px rgba(85, 65, 29, 0.1),
1px -1px 3px rgba(85, 65, 29, 0.1),
-1px -1px 3px rgba(85, 65, 29, 0.1),
1px  0px 3px rgba(85, 65, 29, 0.1),
0px  1px 0px rgba(85, 65, 29, 0.1),
-1px  0px 0px rgba(85, 65, 29, 0.1),
0px -1px 0px rgba(85, 65, 29, 0.1);
}

h2{
color: #ffffff;
font-size: 39px;
font-weight: 600;
/*   font-feature-settings: "palt";*/
padding: 35px 15px 35px 15px;
line-height: 1.6;
}


.h2copy{
padding: 45px 0px 0 0px;
}
.shadow{
text-shadow:
1px  1px 12px rgba(0,0,0,0.1),
-1px  1px 12px rgba(0,0,0,0.1),
1px -1px 12px rgba(0,0,0,0.1),
-1px -1px 12px rgba(0,0,0,0.1),
1px  0px 12px rgba(0,0,0,0.1),
0px  1px 0px rgba(0,0,0,0.1),
-1px  0px 0px rgba(0,0,0,0.1),
0px -1px 0px rgba(0,0,0,0.1);
}

h3{
color: #ffffff;
font-size: 26px;
padding: 15px;
line-height: 1.45;
font-weight: 600;
}

img.hm{
padding: 0px 15px;
}

@media (max-width: 768px){
h1{
font-size: 2.65em;
line-height: 1.2;
padding: 3px 15px 13px 15px;
}
.h2copy{
padding: 170px 0px 0 15px;
}

h2{
font-size: 2.45em;
line-height: 1.2;
overflow: inherit;
}
h3{
font-size: 1.65em;
}

.h2shadow{
text-shadow    :
1px  1px 0px #000000,
-1px  1px 0px #000000,
1px -1px 0px #000000,
-1px -1px 0px #000000,
1px  0px 0px #000000,
0px  1px 0px #000000,
-1px  0px 0px #000000,
0px -1px 0px #000000;
line-height: 1.6;
}
}
@media (max-width: 768px){
h1{
font-size: 2.65em;
line-height: 1.2;
padding: 3px 0 3px 0px;
}
.h2copy{
padding: 20px 0px 10px 5px;
width: 497px;
}
.ri100front{
padding: 0 0 0 25px;
}
}

@media (max-width: 478px){
h1{
font-size: 2.2em;
line-height: 1.1;
padding: 0;
}
h3{
font-size: 1.45em;
}
.h2copy{
/* width: 220px;*/
height: auto;
clear: both;
}
.ri100front{
padding: 0 0 0 25px;
width: 180px;
}
}

.fukidasi{
padding: 45px 0 15px 15px;
}
.stamp{
position: absolute;
top: 15px;
right: 0;
text-align: left;
z-index: 2;
margin-top: 40px;
}

.stamp-note{
display: block;
position: absolute;
bottom: 110px;
right: 80px;
text-align: left;
z-index: 2;
font-size: 0.65rem;
line-height: 1.55;
color: #ffffff;
font-feature-settings: "palt";
background-color: rgba(0,0,0,0.3);
padding: 2px 2px;
}
.stampgoods{
position: absolute;
top: 360px;
right: 15px;
text-align: left;
z-index: 2;
width: 214px;
}

@media (max-width: 1024px){
.fukidasi{
padding: 20px 0 15px 15px;
}
}
@media (max-width: 768px){
.stamp{
position: absolute;
display: none;
}
.stamp-note{
position: absolute;
bottom: 10px;
left: 20px;
text-align: left;
z-index: 2;
font-size: 0.65rem;
line-height: 1.55;
color: #ffffff;
font-feature-settings: "palt";
background-color: inherit;
width: 100%;
}
}

@media (max-width: 528px){
.stamp{
position: absolute;
display: none;
}
.fukidasi{
width: 200px;
height: auto;
}
}
@media (max-width: 478px){
.stampgoods{
position: absolute;
top: 200px;
right: 10px;
text-align: left;
z-index: 2;
width: 170px;
}
}
@media (max-width: 320px){
.stampgoods{
position: absolute;
top: 330px;
right: 10px;
text-align: left;
z-index: 2;
width: 100px;
}
}
/*************************************************
SubArea
*************************************************/
.SubArea {
width: 100%;
position: relative;
padding: 25px 0 25px 0;
-webkit-text-size-adjust: none;
text-align: center;
}

@media (max-width: 768px){
.SubArea {
width: 100%;
position: relative;
-webkit-text-size-adjust: none;
text-align: center;
}
}


/* 「LeftToRight」の動作内容 */
@keyframes LeftToRight {
0% {
opacity: 1;/* 透明 */
transform: translateX(-150px);/* X軸方向に50px */
}
100% {
opacity: 1;/* 不透明 */
transform: translateX(0);
}
}
/* 「RightToLeft」の動作内容 */
@keyframes RightToLeft {
0% {
opacity: 1;/* 透明 */
transform: translateX(50px);/* X軸方向に50px */
}
100% {
opacity: 1;/* 不透明 */
transform: translateX(0);
}
}

.SubArea .content{
max-width: 1080px;
width: 100%;
margin: 0 auto;
text-align: center;
}

.SubArea h2{
padding: 75px 0 0 0;
}

.SubArea p{
color: #000000;
font-size: 17px;
padding: 0 0 20px 0;
font-weight: 600;
line-height: 1.95;
}

@media (max-width: 768px){
.SubArea h2{
padding: 0px 0 0 0;
}

.SubArea p{
color: #000000;
font-size: 3.25vw;
padding: 15px 0 0 0;
font-weight: 300;
line-height: 1.85;
}
}
/*************************************************
PointArea
*************************************************/

.PointArea {
width: 100%;
position: relative;
background-color: #ffffff;
color: #000000;
-webkit-text-size-adjust: none;
text-align: center;
}

.PointArea .content{
max-width: 1080px;
width: 100%;
margin: 0 auto;
text-align: center;
}

.PointArea h2{
padding: 45px 0 0 0;
}
.PointArea h2 span{
font-size: 5.0vw;
font-feature-settings: "palt";
}
.PointArea h3{
color: #000000;
font-size: 24px;
padding: 15px 0;
line-height: 1.45;
font-weight: 600;
}
.PointArea h3 span{
color: #009AA4;
}
@media (max-width: 780px){
.PointArea h3{
padding:15px 0;

}

}
.PointArea p{
color: #000000;
font-size: 15px;
padding: 0;
line-height: 1.8;
}


.pointclm2{
max-width: 1080px;
width: 100%;
height: auto;
clear: both;
text-align: center;
padding: 0 0 25px 0;
}

.pointclm2:after {
content: "";
display: block;
clear: both;
}

.point01,
.point03{
max-width: 1080px;
float: none;
display: block;
padding: 0px 0 100px 0;
}

.point02,
.point04,
.point05{
width: 50%;
float: left;
display: block;
padding: 25px 0;
}

.line{
padding: 20px 0;
}
.movie{
max-width: 100%;
height: auto;
}


@media (max-width: 780px){
.point02,
.point03,
.point04,
.point05{
width: 100%;
float: none;
display: block;
padding: 25px 0;
}

.line img{
width: 100%;
}
}
.point{
padding:0;
}


.pointph{
width: 490px;
height: auto;
padding: 10px 0;
}
@media (max-width: 768px){
.pointph{
width: 100%;
height: auto;
padding: 10px 0;
}
}

.PointArea .main_vi {
width: 100%;
max-height: 552px;
min-height: 552px;
position: relative;
overflow: hidden;
}
@media (max-width: 768px){
.PointArea .main_vi {
width: 100%;
max-height: 452px;
min-height: 452px;
}
}

@media (max-width: 528px){
.PointArea .main_vi {
width: 100%;
max-height: 312px;
min-height: 312px;
}
}
@media (max-width: 468px){
.PointArea .main_vi {
width: 100%;
max-height: 212px;
min-height: 212px;
}
}

.PointArea video {
max-width: 980px;
width: 100%;
height: auto;
margin: 0 auto;
position: absolute;
left: 0;
right: 0;
}


.play-btn {
width: 12px;
height: 12px;
position: absolute;
bottom:10px;
left: 0;
right: 0;
margin: 0 auto;
z-index: 12;
cursor: pointer;
}
.play-btn.play .playBtn{
display: none;
}
.play-btn.play .pauseBtn{
display: block;
}
.play-btn.pause .pauseBtn{
display: none;
}
.play-btn.pause .playBtn{
position: absolute;
}


/*************************************************
FlowArea
*************************************************/

.FlowArea {
width: 100%;
position: relative;
background-color: #f8f8f7;
color: #000000;
-webkit-text-size-adjust: none;
text-align: center;
}

.FlowArea .content{
max-width: 1080px;
width: 100%;
margin: 0 auto;
text-align: center;
padding: 30px 0 110px 0;
}

.FlowArea h2{
color: #009AA4;
font-size: 36px;
font-weight: 600;
padding: 45px 0 0 0;
line-height: 1.6;
}

.FlowArea h3{
color: #000000;
font-size: 24px;
font-feature-settings: "palt";
padding: 0 0 15px 0;
line-height: 1.6;
}


.FlowArea p{
color: #000000;
font-size: 16px;
padding: 0;
line-height: 1.8;
}

.flow{
padding: 30px 0;
}


/*************************************************
CaseArea
*************************************************/

.CaseArea {
width: 100%;
position: relative;
/*  background: linear-gradient(to bottom, #ffffff 0%, #D9EDEA 5%, #D9EDEA 100%);
background: #D9EDEA;*/
background-image: linear-gradient(-45deg,#f4f5e6 25%,#D9EDEA 25%,#D9EDEA 50%,#f4f5e6 50%,#f8f8f8 75%,#D9EDEA 75%,#D9EDEA);
background-size: 10px 10px;
background-repeat: repeat;
color: #000000;
-webkit-text-size-adjust: none;
text-align: center;
padding: 0 0 80px 0;
}

@media (max-width: 478px){
.CaseArea {
padding: 0 0 20px 0;
}
}
.CaseArea .content{
max-width: 1080px;
width: 100%;
margin: 0 auto;
text-align: center;
padding: 30px 0;
}

.CaseArea h2{
color: #009AA4;
font-size: 36px;
font-weight: 600;
padding: 45px 0 0 0;
line-height: 1.6;
}

.CaseArea h3{
color: #000000;
font-size: 28px;
font-weight: 600;
padding: 15px 0;
line-height: 1.6;
float: none;
display: block;
}

.CaseArea h4{
color: #000000;
font-size: 22px;
font-weight: 600;
padding: 25px 0 0 0;
line-height: 1.6;
}
@media (max-width: 478px){
.CaseArea h2{
font-size: 7.23vw;
padding: 0 0 0 0;
}
.CaseArea h3 {
font-size: 5.24vw;
}
.CaseArea h4{
font-size: 4.67vw;
}
}
.CaseArea p{
color: #000000;
font-size: 16px;
padding: 0;
line-height: 1.8;
}
@media (max-width: 478px){
.CaseArea p{
color: #000000;
font-size: 0.95rem;
padding: 0;
line-height: 1.8;
}
}
.case{
padding: 10px 0;
}

@media (max-width: 780px){
.case,
#hint .js-modal-btn,
#case .js-modal-btn{
width: 100%;
}
}
.caseclm2top{
max-width: 1080px;
width: 100%;
height: auto;
clear: both;
text-align: left;
padding: 25px;
background-color: #fff;
margin: 20px auto 50px auto;
border: dotted 4px #D9EDEA;
}

.caseclm2top:after {
content: "";
display: block;
clear: both;
}
.caseclm2{
max-width: 1080px;
width: 100%;
height: auto;
clear: both;
text-align: left;
padding: 25px;
background-color: #fff;
margin: 50px auto;
border: dotted 4px #D9EDEA;
}

@media (max-width: 780px){
.caseclm2top{
width: 90%;
margin: 10px auto 50px auto;
}
.caseclm2{
width: 90%;
}
}
.caseclm2:after {
content: "";
display: block;
clear: both;
}

.casedetail{

}

.casedetail:after {
content: "";
display: block;
clear: both;
}

.casetitle{
padding: 0 0 10px 0;
border-bottom: 5px solid #FF7789;
display: inline-block;
width: 100%;

}

.casetext{
width: 53%;
float: left;
display: block;
padding: 25px 0;
}

.casemovie{
width: 47%;
float: left;
display: block;
padding: 25px 0;
}

.casemd {
position: relative;
text-align: center;
font-size: 22px;
letter-spacing: 0em;
padding: 4px 8px 4px 0px;
display: inline-block;
margin: 0 0 0 30px;
color: #FF7789;
}

.casemd:before {
content: "/";
font-size: 18px;
position: absolute;
top: 2px;
left: calc(-1em - 6px);
}
.casemd:after {
content: "/";
font-size: 16px;
position: absolute;
top: 2px;
right: calc(-1em - 4px);
}

@media (max-width: 768px){
.casetext{
width: 100%;
float: none;
display: block;
padding: 15px 0;
}

.casemovie{
width: 100%;
float: none;
display: block;
padding: 25px 0;
}
}

.caseuse{
background: url("../img/yoto.png") left 10px no-repeat;
padding: 0 0 10px 110px;
min-height: 110px;
border-bottom: dotted 1px #FF7789;
}

.user{
font-weight:600;
text-align: right;
float: right;
display: block;
margin: 0 10px 0 0;
}
.caseuse p{
padding: 10px 0 0 0 ;
color: #000;
font-size: 0.85rem;
}

.category{
display: inline-block;
background-color: #FF7789;
color: #ffffff;
font-size: 14px;
padding: 2px 15px;
margin: 2px 0;
}

.second{
margin: 0 0 0 5px;

}

@media (max-width: 768px){
.caseuse{
background: url("../img/yoto.png") left 15px no-repeat;
padding: 10px 0 0 0;
min-height: 110px;
border-bottom: dotted 1px #FF7789;
background-size: 60px auto;
}
.category{
display: inline-block;
background-color: #FF7789;
color: #ffffff;
font-size: 14px;
padding: 2px 10px;
margin: 2px 0;
}

.categoryarea{
margin: 0 0 0 80px;
min-height: 60px;

}
}

/*************************************************
UseArea
*************************************************/

.UseArea {
width: 100%;
position: relative;
background-color: #ffffff;
color: #000000;
-webkit-text-size-adjust: none;
text-align: center;
}
.UseArea h2{
color: #009AA4;
font-size: 36px;
font-weight: 600;
padding: 45px 0 0 0;
line-height: 1.6;
}
.UseArea .content{
max-width: 1080px;
width: 100%;
margin: 0 auto;
text-align: center;
padding: 30px 0 0 0;
}

.usepict{
padding: 30px 0;
}
@media (max-width: 768px){
.usepict{
padding: 30px 0;
width: 90%;
}
}
.UseArea .js-carousel {
margin: 0 auto 0 auto;
position: relative;
overflow: hidden;
width: 100%;
padding: 0 0 30px 0;
}
.UseArea .js-carousel .box {
margin: 0 auto;
width: 600px;
}
@media (max-width: 768px){
.UseArea .js-carousel .box {
margin: 0 auto;
width: 100%;
}
}
.UseArea .js-carousel .box.js-area {
position: relative;
left: 50%;
width: 1800px;
margin-left: -900px;
}

.UseArea .js-carousel li {
width: 600px;
text-align: center;
}
@media (max-width: 768px){
.UseArea .js-carousel li {
width: 100%;
text-align: center;
}
}
.UseArea .js-carousel li img {
display: block;
}
.UseArea .js-carousel li .caption {
padding: 18px 10px 16px 10px;
width: 100%;
font-weight: bold;
display: inline-block;
text-align: center;
line-height: 1.30769;
}
.UseArea .js-carousel .item-01 {
background: #f4f5e6;
}
.UseArea .js-carousel .item-02 {
background: #D9EDEA;
}
.UseArea .js-carousel .item-03 {
background: #f4f5e6;
}
.UseArea .js-carousel .item-04 {
background: #dcd0c3;
}

/* carousel castom */
.UseArea .js-carousel .bx-wrapper {
box-shadow: none;
margin: 0;
border: 0;
background: none;
}
.UseArea .js-carousel .bx-wrapper .bx-viewport {
overflow: visible !important;
left: 0;
border-width: 0;
box-shadow: none;
}
.UseArea .js-carousel .bx-controls {
margin: 0 auto;
text-align: center;
}
.UseArea .js-carousel .bx-wrapper .bx-controls-auto,
.UseArea .js-carousel .bx-wrapper .bx-pager {
position: static;
}
.UseArea .js-carousel .bx-pager {
width: auto;
padding-top: 0;
display: inline-block;
margin-top: 22px;
}
.UseArea .js-carousel .bx-pager .bx-pager-item {
font-size: 0.625rem;
line-height: 1;
display: table-cell;
padding: 0 12px;
}
.UseArea .js-carousel .bx-pager .bx-pager-item button {
border-radius: 10px;
cursor: pointer;
display: inline-block;
height: 12px;
width: 12px;
background: #e6e6e6;
color: #e6e6e6;
}
.UseArea .js-carousel .bx-pager .bx-pager-item .active {
background: #f3fd7e;
}
.UseArea .js-carousel .bx-controls-direction {
position: relative;
width: 600px;
margin: 0 auto;
top: -250px;
left: 0;
z-index: 2;
}
@media (max-width: 768px){
.UseArea .js-carousel .bx-controls-direction {
width: 100%;
top: -15.5rem;
}
}
@media (max-width: 478px){
.UseArea .js-carousel .bx-controls-direction {
width: 100%;
top: -14.5rem;
}
}
.UseArea .js-carousel .bx-controls-direction p {
position: absolute;
top: 0;
left: 17px;
width: 42px;
height: 42px;
}
.UseArea .js-carousel .bx-controls-direction p + p {
left: auto;
right: 17px;
}
.UseArea .js-carousel .bx-controls-direction p button {
background: none;
cursor: pointer;
display: block;
position: relative;
width: 42px;
height: 42px;
top: 0;
overflow: hidden;
}
.UseArea .js-carousel .bx-controls-direction p button::before {
content: "";
display: block;
width: 21px;
height: 21px;
position: absolute;
top: 50%;
margin-top: -11px;
}
.UseArea .js-carousel .bx-controls-direction p button span {
display: block;
position: absolute;
top: -999em;
left: -999em;
}


/*************************************************
hintArea
*************************************************/

.HintArea {
width: 100%;
position: relative;
background: url("../img/hint_bg.png") top center repeat;
color: #000000;
-webkit-text-size-adjust: none;
text-align: center;
}
.HintArea h2{
color: #009AA4;
font-size: 36px;
font-weight: 600;
padding: 0;
line-height: 1.6;
}
.HintArea .content{
max-width: 1280px;
width: 100%;
margin: 0 auto;
text-align: center;
padding: 0 0 80px 0;
}

.moviethum{
width: 100%;
min-height: 300px;
clear: both;
padding:0;
text-align: center;
margin: 0 auto;
}

.movienotice{
width: 100%;
font-size: 0.85rem;
clear: both;
padding:0;
text-align: right;
}
@media (max-width: 768px){

.HintArea .content{
max-width: 1080px;
width: 100%;
margin: 0 auto;
text-align: center;
padding: 0 0 20px 0;
}


.movienotice{
width: 100%;
font-size: 0.85rem;
clear: both;
padding:0 5%;
text-align: left;
}
}
.thum_cell{
display: block;
width: 24%;
float: left;
background-color: #fff;
padding: 10px;
margin: 30px 5px;
text-align: left;
}


@media (max-width: 768px){
.thum_cell{
display: block;
width: 90%;
float: none;
background-color: #fff;
padding: 20px;
margin: 30px auto;
text-align: left;
}
}

.mvtag{
display: inline-block;
background-color: #009AA4;
padding: 2px 5px;
font-size: 0.85rem;
color: #ffffff;
font-feature-settings: "palt";
}

.mvtl{
font-size: 1.0rem;
font-weight: bold;
line-height: 1.60;
margin: 10px 0;
}
@media (max-width: 768px){
.mvtl{
font-size: 1.2rem;
}
}
.hint-y{
color: #f3fd7e;
}

.hint-title{
/* font-size: 0.9rem;*/
}


img .mvbt{
width: 260px;
}

@media (max-width: 768px){
img .mvbt{
width: 100%;
}
}
/*************************************************
#price
*************************************************/

.priceclm2{
width: 100%;
height: auto;
clear: both;
text-align: center;
padding: 0;
}

.priceclm2:after {
content: "";
display: block;
clear: both;
}
.priceclm_l{
width: 35%;
float: left;
display: block;
padding: 25px 0 0 0;
}
.priceclm_r{
width: 65%;
float: left;
display: block;
padding: 25px 0 0 0;
}

@media (max-width: 768px){
.priceclm_l{
width: 100%;
float: none;
display: block;
padding: 0px 0 0 0;
}
.priceclm_r{
width: 100%;
float: none;
display: block;
padding: 25px 0 0 0;
}
.priceclm_l img{
margin: 20px 0 0 0;
width: 90%;
}
}
#price h2{
display: inline-block;
width: 100%;
color: #000000;
font-size: 36px;
font-weight: 600;
padding: 0;
line-height: 1.1;
text-align: center;
}

.price_set{
margin: 10px 0 0 0;
padding:0;
width: 100%;
text-align: center;
border-collapse: collapse;
}

.price_set tr th{
padding: 5px 10px;
border-top: 1px solid #6c94c2;
border-bottom: 1px solid #6c94c2;
border-right: 1px solid #6c94c2;
background-color: #d8eaf5;
font-weight: 600;
line-height: 1.2;
vertical-align: middle;
}
.price_set tr th.lastedge{
padding: 5px 10px;
border-top: 1px solid #6c94c2;
border-bottom: 1px solid #6c94c2;
border-right: none;
background-color: #d8eaf5;
font-weight: 600;
background-image:none !important;
vertical-align: middle;
}
.price_set tr td{
padding: 5px 10px;
border-bottom: 1px solid #6c94c2;
border-right: 1px solid #6c94c2;
background: #fff;
vertical-align: middle;
}

.price_set tr td.lastedge{
padding: 5px 10px;
border-bottom: 1px solid #6c94c2;
border-right: none;
background: #fff;
background-image:none !important;
vertical-align: middle;
}

@media (max-width: 768px){
.price_set tr th.lastedge{
min-height: 70px;
}
.price_set tr td.lastedge{
min-height: 70px;
}
}

/*************************************************
FlowArea
*************************************************/

.ShopArea {
width: 100%;
position: relative;
background-color: #85735f;
color: #ffffff;
-webkit-text-size-adjust: none;
text-align: center;
}

.ShopArea .content{
max-width: 1080px;
width: 100%;
margin: 0 auto;
text-align: center;
padding: 30px 0 120px 0;
}

.shopclm2{
max-width: 1080px;
width: 100%;
height: auto;
clear: both;
text-align: left;
padding: 0 0 25px 0;
}

.shopclm2:after {
content: "";
display: block;
clear: both;
}
.shopclm{
width: 48.8888%;
float: left;
display: block;
padding: 25px 0;
text-align: center;
}

.shopclm img{
width: 460px;
height: auto;
}
@media (max-width: 768px){
.ShopArea .content{
padding: 30px 0 50px 0;
}
.shopclm{
width: 100%;
float: none;
display: block;
padding: 25px 0;
text-align: center;
}
.shopclm img{
width: 80%;
}
}
.ShopArea h2{
color: #ffffff;
font-size: 36px;
padding: 45px 0 0 0;
font-weight: 500;
line-height: 1.6;
/*  text-shadow    :
1px  1px 0px #000000,
-1px  1px 0px #000000,
1px -1px 0px #000000,
-1px -1px 0px #000000,
1px  0px 0px #000000,
0px  1px 0px #000000,
-1px  0px 0px #000000,
0px -1px 0px #000000;*/
}

@media (max-width: 478px){
.ShopArea h2{
font-size: 7.23vw;
padding: 0 0 0 0;
}
}

.ShopArea h3{
color: #f3fd7e;
font-size: 20px;
padding: 10px 0 5px 0;
line-height: 1.6;
position: relative;
}
.ShopArea p{
color: #ffffff;
font-size: 16px;
padding: 0px 0 0 0;
line-height: 1.8;
}

.center_name::after {
content: "";
display: block;
width: 165px;
height: 3px;
position: absolute;
bottom: -10px;
left: 50%;
margin: 0 0 0 -82.5px;
}
.center_name::after {
/*  background: linear-gradient(to right, #fff 0%, #fff 100%);*/
}
.shop{
padding: 10px 0;
}



/*************************************************
FaqArea
*************************************************/

.FaqArea {
width: 100%;
position: relative;
background-color: #9ebfd4;
color: #000000;
-webkit-text-size-adjust: none;
text-align: center;
}

.FaqArea .content{
max-width: 1080px;
width: 100%;
margin: 0 auto;
text-align: center;
padding: 30px 0;
}

.FaqArea h2{
color: #fff;
font-weight: 500;
font-size: 36px;
padding: 45px 0 0 0;
line-height: 1.85;
/*  text-shadow    :
1px  1px 1px #000000,
-1px  1px 0px #000000,
1px -1px 0px #000000,
-1px -1px 0px #000000,
1px  0px 0px #000000,
0px  1px 0px #000000,
-1px  0px 0px #000000,
0px -1px 0px #000000;*/
}

@media (max-width: 478px){
.FaqArea h2{
font-size: 7.23vw;
padding: 0 0 0 0;
}
}
.FaqArea h3{
color: #000000;
font-size: 28px;
font-feature-settings: "palt";
padding: 15px 0;
line-height: 1.6;
float: left;
display: block;
}

.FaqArea h4{
color: #000000;
font-size: 24px;
font-feature-settings: "palt";
padding: 15px 0 0 0;
line-height: 1.6;
}

.FaqArea p{
color: #000000;
font-size: 16px;
padding: 0;
line-height: 1.8;
}
.FaqArea dl{
background-color: #fff;
color: #000000;
font-size: 16px;
line-height: 1.8;
text-align: left;
margin: 20px 0;
border: solid 4px #cbe0ee;
}
.FaqArea dl dt{
color: #376ea4;
font-size: 18px;
padding: 14px 0 0 85px;
line-height: 1.8;
text-align: left;
font-weight: 500;
text-align: left;  background: url("../img/que.png") left top no-repeat;
min-height: 50px;
border-bottom:  dotted 2px #cbe0ee;

}

.FaqArea dl dd{
color: #000000;
font-size: 16px;
padding: 20px 20px 20px 85px;
line-height: 1.8;

min-height: 45px;
}

.faq{
padding: 10px 0;
}

@media (max-width: 768px){
.FaqArea img{
width: 100%;
}
}


.footch{
max-width: 1080px;
text-align: left;
font-size: 0.85rem;
margin: 30px auto 0 auto;
padding: 20px 0;
}
.bn_Movie{
position:fixed;
right:0;
z-index:300;
display:block;
line-height:0;
outline:none;
-webkit-transition:opacity .2s linear;
transition:opacity .2s linear;
}
.bn_Movie_pc{
position:fixed;
right:0;
z-index:300;
display:none;
line-height:0;
outline:none;
-webkit-transition:opacity .2s linear;
transition:opacity .2s linear;
}
@media (min-width:769px){
.bn_Movie_pc{padding:0;bottom:30px;}
.bn_Movie{padding:0;bottom:30px;}
}
@media (min-width:769px){
.bn_Movie_pc:hover{opacity:.7}
.bn_Movie:hover{opacity:.7}
}
@media (max-width:768px){
.bn_Movie_pc{padding:0;top:645px;}
.bn_Movie_pc img{width: 200px;}
.bn_Movie{padding:0;top:645px;}
.bn_Movie img{width: 200px;}
}
@media (max-width: 478px){
.bn_Movie{padding:0;top:450px;}
.bn_Movie img{width: 130px;}
}
@media (max-width: 375px){
.bn_Movie{padding:0;top:450px;}
.bn_Movie img{width: 115px;}
}
@media (max-width: 320px){
.bn_Movie{padding:0;top:520px;}
.bn_Movie img{width: 80px;}
}
.bn_Inq{background-color: #009AA4;padding: 3vw 8vw;bottom: 0;text-align: center;width: 100%;position:fixed;right:0;z-index:300;display:none;line-height:0;outline:none;-webkit-transition:opacity .2s linear;transition:opacity .2s linear}
.bn_Inq img{
width: 90%;
}
.is-fixed {
display: none!important;
}

.is-block {
display: block!important;
}
.fade_off {
opacity: 0;
-webkit-transition: all 1s;
-moz-transition: all 1s;
-o-transition: all 1s;
-ms-transition: all 1s;
transition: all 1s;
}

.fade_on {
opacity: 1;
}
.cp-PageTop {
display: none!important;
}

.PointArea .y-videoIframe {
max-width: 890px;
width: 100%;
height: auto;
margin: 0 auto;
position: absolute;
left: 0;
right: 0;
aspect-ratio: 16 / 9;
}

.PointArea .y-videoIframe iframe {
width: 100%;
height: 100%;
}