@charset "UTF-8";

/* m_img_area
---------------------------------------------------------*/
.contentpage .m_img_area{
    background-image: url("../images/access/m_img@2x.jpg");}



/* box1
---------------------------------------------------------*/
.box1 h3{
    display: inline-block;
    position: relative;
    font-size:560%;
    letter-spacing: 0.2em;
    line-height: 1em;
    margin-left: -0.35em;
}
.box1 h3 span{
    color: #fff;
    -webkit-text-stroke: 1px #5C4F45;
    text-stroke: 1px #5C4F45;
}
.box1 h3::before{
    position: absolute;
    display: block;
    content: "";
    background: url("../images/access/deco1.svg")no-repeat top right;
    background-size: 100% auto;
    width: 1.45em;
    max-width: 120px;
    height:70px;
    top:-0.2em;
    right: -1.38em;
}
.box1 h3::after{
    position: absolute;
    display: block;
    content: "";
    background: url("../images/access/deco1.svg")no-repeat bottom left;
    background-size: 100% auto;
    width: 1.45em;
    max-width: 120px;
    height:70px;
    bottom:-0.8em;
    left: -1.1em;
}
.box1 iframe{
    margin-top: -1.5em;
    position: relative;
    z-index: 2;
}
.box1 .flexbox1,
.box1 .flexbox2{
    display: flex;
    justify-content: space-between;
}
.box1 .flexbox1{
    flex-flow: row-reverse;
}
.box1 .flexbox2{
    flex-flow: row-reverse;
}
.box1 .flexbox1 .fl_r{
    text-align: right;
    width: 40%;
}
.box1 .flexbox1 .fl_l {
    width: 60%;
    padding-top: 1.5em;
}
.box1 .flexbox1 .fl_l .ft_min{
    font-size:140%;
    letter-spacing: 0.12em;
    line-height: 1em;
    margin-bottom: .5em;
}

.box1 .flexbox2 .fl_l {
    width: 43%;
    max-width: 500px;
}
.box1 .flexbox2 .fl_r{
    width: 53%;
}
.box1 .flexbox2 .fl_r li{
    position: relative;
    padding-left: 4.35rem;
    box-sizing: border-box;
    margin-bottom: 2.5rem;
}
.box1 .flexbox2 .fl_r li:last-child{
    margin-bottom: 0;
}
.box1 .flexbox2 .fl_r li::before{
    position: absolute;
    display: block;
    content: "";
    background: url("../images/access/deco2.svg")no-repeat top left;
    background-size: 100% auto;
    width: 2.5rem;
    height: 2.5rem;
    top: -0.25em;
    left: 0;
}
.box1 .flexbox2 .fl_r li:nth-child(2)::before{
    background-image: url("../images/access/deco3.svg");}
.box1 .flexbox2 .fl_r li:nth-child(3)::before{
    background-image: url("../images/access/deco4.svg");}

.box1 .flexbox2 .fl_r li .ft_min{
    font-size:110%;
    letter-spacing: 0.2em;
    line-height: 1.6em;
    margin-top: 0;
}
.box1 .flexbox2 .fl_r li p{
    margin-top: .5em;
}

.box1 .txt1{
    border-top: rgba(173,174,179,0.50) 1px solid;
    margin-top: 70px;
    padding-top: 40px;
    text-align: center;
}

.box1 .plus_imglist{
    max-width: 1180px;
    margin-left: auto;
    margin-right: auto;
    display: flex;
    justify-content: space-between;
}
.box1 .plus_imglist li{
    width: 50%;
}

/* PC調整
------------------------------------------*/
@media only screen and (min-width: 960px) and (max-width: 1350px) {
.box1 .iframe_box{
    width: 85%;
    margin: 0 auto;
}
.box1 h3{
    font-size: 7vw;
}
.box1 iframe{
    height: 36vw;
}
.box1 .flexbox2 .fl_r li{
    padding-left: 3rem;
    margin-bottom: 1.5rem;
}
.box1 .flexbox2 .fl_r li .ft_min{
    letter-spacing: 0.15em;
}
}
/* Tablet (Portrait)
------------------------------------------*/
@media only screen and (min-width: 768px) and (max-width: 959px) { 
.box1 .iframe_box{
    width: 85%;
    margin: 0 auto;
}
.box1 h3{
    font-size: 8.5vw;
}
.box1 h3::before{
    width: 1em;
    top:-0.2em;
    right: -0.9em;
}
.box1 h3::after{
    width: 1em;
    bottom:-0.5em;
    left: -0.7em;
}
.box1 iframe{
    margin-top: -1.3em;
    height: 45vw;
}
.box1 .flexbox2 .fl_r li{
    padding-left: 2.8rem;
    margin-bottom: 1.5rem;
}
.box1 .flexbox2 .fl_r li .ft_min{
    letter-spacing: normal;
}
.box1 .flexbox2 .fl_r li::before{
    top: -0.4em;
} 
.box1 .txt1{
    margin-top: 4%;
    padding-top: 3%;
}
}

/* Mobile (Portrait) 
------------------------------------------*/ 
@media only screen and (max-width: 767px) { 
.box1 .iframe_box{
    width: 100%;
    margin: 0 auto;
    text-align: center;
}
.box1 h3{
    font-size: 13vw;
    margin-left: auto;
    margin-right: auto;
    text-align: center;
}
.box1 h3::before{
    width: 1em;
    top:-0.2em;
    right: -1em;
}
.box1 h3::after{
    width: 1em;
    bottom: 0.1em;
    left: -1.2em;
}
.box1 iframe{
    margin-top: 0;
    height: 70vw;
}
.box1 .flexbox1,
.box1 .flexbox2{
    display: block;
}
.box1 .flexbox1{
    padding-bottom: 8%;
    margin-bottom: 8%;
    border-bottom: rgba(173,174,179,0.50) 1px solid;
}
.box1 .flexbox1 > div{
    width:100%!important;
}
.box1 .flexbox1 .fl_l {
    padding-top: 8%;
    text-align: left;
}
.box1 .flexbox1 .fl_l .ft_min{
    margin-bottom: .5em;
}
.box1 .flexbox1 .fl_l p{
    font-size:90%;
    letter-spacing: normal;
    line-height: 1.6em;
}/*
.box1 .flexbox1 .fl_l p.sp_tel_btn{
    text-decoration: underline;
}*/
.box1 .flexbox1 .fl_r .com_link1 a{
    margin-top: .5em;
}
    
.box1 .flexbox2 .fl_l {
    width: 100%;
    margin: 7% auto 0;
    text-align: center;
}
.box1 .flexbox2 .fl_r{
    width:100%;
    line-height: 1.5em;
}
.box1 .flexbox2 .fl_r li{
    padding-left: 2.8rem;
    margin-bottom: 1.5rem;
}
.box1 .flexbox2 .fl_r li::before{
    top: -0.1em;
    left: -0.2em;
}    
.box1 .flexbox2 .fl_r li .ft_min{
    font-size:105%;
    letter-spacing: 0.05em;
}
.box1 .flexbox2 .fl_r li p:nth-child(3){
    font-size:88%;
    line-height: 1.4em;
    letter-spacing: normal;
}
.box1 .txt1{
    border-top: none;
    margin-top: 4%;
    padding-top: 0;
    text-align: left;
}
    
.box1 .plus_imglist{
    width: 112%;
    margin-left: -6%;
}
}






/* cancel
---------------------------------------------------------*/
#cancel .bg{
    background: #F5F3F4;
    padding: 40px 4% 70px;
    box-sizing: border-box;
    text-align: center;
}
#cancel .deco{
    margin: 0 auto 25px;
    text-align: center;
}
#cancel .txtbox .ft_min{
    font-size:165%;
    letter-spacing: 0.1em;
    line-height: 1em;
    margin-bottom: .7em;
}
#cancel .txtbox span{
    font-weight: bold;
}

/* Tablet (Portrait)
------------------------------------------*/
@media only screen and (min-width: 768px) and (max-width: 959px) { 
#cancel .bg{
    padding: 4vw 4% 8%;
}
#cancel .deco{
    width: 8vw;
    margin: 0 auto 3%;
}
#cancel .txtbox .ft_min{
    margin-bottom: .5em;
}
}

/* Mobile (Portrait) 
------------------------------------------*/ 
@media only screen and (max-width: 767px) { 
#cancel .bg{
    padding: 5% 4% 8%;
}
#cancel .deco{
    width: 15vw;
    margin: 0 auto 4%;
}
#cancel .txtbox .ft_min{
    font-size: 6vw;
    margin-bottom: .5em;
}
#cancel .txtbox p{
    text-align: left;
}
}