@charset "UTF-8";

*{margin:0;padding:0;
font-family:"メイリオ",Meiryo,"ヒラギノ角ゴ ProN W3", "Hiragino Kaku Gothic ProN", sans-serif;list-style:none;
font-weight:normal;font-style:normal;
line-break: strict;}

.clearfix {
    zoom:1;/*for IE 5.5-7*/
}
.clearfix:after {/*for modern browser*/
    content:".";
    display: block;
    height:0px;
    clear:both;
    visibility:hidden;
}


p{margin:0; padding:0;
-webkit-text-size-adjust: 100%;
text-size-adjust: none;
font-style:13px;}

.Size-ssmall{font-size:11px; line-height:150%; color:#333333;}
.Size-small{font-size:12px; line-height:140%; color:#333333;}
.Size-Normal{font-size:13px; line-height:200%; color:#333333;}



.Size16{font-size:16px; line-height:180%;}


.Color1{color:#FFFFFF;}
.Color2{color:#F08300;}
.Color3{color:#601986;}
.Color4{color:#036EB8;}

.clear{clear:both;}

.titleBTN{background-image:url(../img/alohome_title2_bg.gif); background-repeat:no-repeat; width:950px; margin:0 auto;}
.titleBTN ul{line-height:0; margin:0px;}
.titleBTN ul li{
	float:left;
	padding:0px 0 0px 15px;
	line-height:0;
	margin:0;
	list-style: none;
}
.titleBTN ul li.no{float:left; padding:0px 0 93px 160px;}



#header{padding:20px;}
div#headerArea {
	position: fixed !important;
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 50px;
	background-color: #00b1a9;
	color: #fff;
    z-index: 2;
}

h1{background: url(../img/alohome_rogo.png) no-repeat;
	text-indent:-9999px; float:left;}
h1 a{ display:block; width:175px; height:26px;}

#headermenu{margin-top:10px; text-align:right;}
#headermenu a{color:#FFF; font-size:12px; font-weight:bold; text-decoration: none;}
#headermenu a{margin-right:1.35em;}


#contetns856{ margin:30px auto 0 auto; width:856px;}

.pl219{ padding-left:219px;}


h2{font-size:28px; font-weight:bold; line-height:100%;
font-family:"メイリオ",Meiryo,"ヒラギノ角ゴ ProN W3", "Hiragino Kaku Gothic ProN", sans-serif;list-style:none;}


ul.navi{margin-left:-20px;line-height:0;}
ul.navi li{float:left; padding:20px 0 0px 20px;line-height:0;}
ul.navi li.no{float:left; padding:20px 0 0px 239px;}

dl{border-top:dashed 1px #888888; padding-top:20px; margin-top:20px;}
dl.end{border-bottom:dashed 1px #888888; padding-bottom:20px; margin-bottom:40px;}
dt{font-size:16px; line-height:180%; margin-bottom:10px; font-weight:bold;}
dd{font-size:14px; line-height:180%; padding-left:16px;}

.wrapper{margin:0px auto; width:950px;}
.wrapper2{background-color:#DFF0EB;}
.wrapper3{background-color:#00b1a9; margin:0 auto;}
.box950{margin:30px auto; width:860px; padding:45px;}

#footer{margin:0px auto; width:860px;}
#copyright{ color:#595757; font-size:10px; margin-top:40px;}

#an100,#an200,#an300,#an400,
#an01,#an02,#an03,#an04,
#an101,#an102,#an103,#an104,#an105,#an106,#an107,#an108,
#an201,#an202,#an203,#an204,#an205,#an206,#an207,#an208,
#an301,#an302,#an303,#an304,#an305,#an306,#an307,#an308,
#an401,#an402,#an403,#an404,#an405,#an406,#an407,#an408{
	padding:50px 0 0 0;
	margin:-50px 0 0 0;
}

.pagetop{font-size:14px; line-height:100%; text-align:right; margin-top:0px; margin-bottom:30px;}
.pagetop.ntop30{font-size:14px; line-height:100%; text-align:right; margin-top:-30px; margin-bottom:30px;}
.pagetop a,.pagetop a:hover{text-decoration:none; color:#000;}


/****************レスポンシブ*****************/
.img-pc{
    display: inline;
}
.img-sp{
    display: none;
}
@media screen and (max-width: 850px) {
    #an100, #an200, #an300, #an400, #an01, #an02, #an03, #an04, #an101, #an102, #an103, #an104, #an105, #an106, #an107, #an108, #an201, #an202, #an203, #an204, #an205, #an206, #an207, #an208, #an301, #an302, #an303, #an304, #an305, #an306, #an307, #an308, #an401, #an402, #an403, #an404, #an405, #an406, #an407, #an408 {padding: 65px 0 0 0;margin: -65px 0 0 0;}
    *{
        box-sizing: border-box;
    }
    img{
        max-width:100%;
        height:auto;
    }
    .img-pc{
        display: none;
    }
    .img-sp{
        display: inline;
    }
    h2{
        margin-bottom:15px;
    }
    #an00,.wrapper,.titleBTN,#an01,#an02,#an03,#an04,#footer{
        max-width:100%;
    }
    #an01,#an04 .pagetop{
        padding-left:15px;
        padding-right:15px;
    }
    ul.navi li{
        padding:0;
    }
    div#headerArea h1{
        margin-top:10px;
        margin-left:15px;
    }
    #headerArea .wrapper{
        position:relative;
    }
    #headermenu{
        background:#ffffff;
        position:absolute;
        right:0;
        top:0;
        display: flex;
        flex-direction: column;
        color:#00b1a9;
        width: 70vw;
        height: 100vh;
        margin-top:0;
        z-index:auto;
        transform:translateX(70vw);
    }
    body{
        position:relative;
    }
    .menu-overlay{
        display:none;
        position:absolute;
        right:0;
        top:0;
        width:100vw;
        height:100vh;
        background:rgba(0,0,0,0.7);
    }
    ul.navi li.no{
        float:none;
        padding: 0;
        padding-bottom:10px;
    }
    ul.navi li{
        float:none;
        width:33%;
        padding-bottom:10px;
    }
    ul.navi li:nth-of-type(odd){
        padding-right:5px;
        padding-left:5px;
    }
    ul.navi li:nth-of-type(even){
        padding-right:5px;
        padding-left:5px;
    }
    ul.navi li img{
        width:100%;
        height:100%;
    }
    ul.navi{
        margin-left:0;
        display:flex;
        flex-wrap:wrap;
    }
    .pl219{
        padding-left:0;
    }
    #contetns856{
        width:100%;
    }
    .box950{
        width:100%;
        padding:45px 30px;
    }
    #an03 .box950{
        padding:0 30px;
        margin:15px auto;
    }
    #an04 div{
        max-width:100%!important;
    }
    #headermenu a,#headermenu span{
        color:#00b1a9;
        border-bottom:1px solid #00b1a9;
        display:flex;
        align-items:center;
        justify-content: center;
        height:60px;
        margin-right:0;
        font-size:14px!important;
        min-height:80px;
    }
    .titleBTN{
        background-size:cover;
        background-position:top center;
        padding-bottom:60px;
        text-align: center;
        padding-left:15px;
        padding-right:15px;
    }
    .titleBTN img{
        max-width:450px;
    }
    .titleBTN p{
        padding:120px 30px 50px;
    }
    .titleBTN ul li.no{
        padding:0;
        float:none;
    }
    .titleBTN ul{
        display:flex;
        flex-wrap:wrap;
    }
    .titleBTN ul li{
        width:25%;
        float:none;
        padding:0;
        text-align:center;
        margin-bottom:30px;
    }
    .titleBTN ul li:nth-of-type(odd){
        padding-left:10px;
        padding-right:10px;
    }
    .titleBTN ul li:nth-of-type(even){
        padding-right:10px;
        padding-left:10px;
    }
    .titleBTN ul li a{
        display:block;
    }
    .titleBTN ul li a img{
        width:100%;
    }
    #copyright{
        text-align: center;
    }    
    
    /****************hamburger*****************/
    
    .hamburger {
        position: absolute; /*ボタン内側の基点となるためrelativeを指定*/
        cursor: pointer;
        width: 50px;
        height: 50px;
        border-radius: 5px;
        right: 0;
        top: 0;
        z-index: 9;
    }
    /*ボタン内側*/
    .hamburger span {
        display: inline-block;
        transition: all .4s; /*アニメーションの設定*/
        position: absolute;
        left: 14px;
        height: 3px;
        border-radius: 2px;
        background: #fff;
    }
    .hamburger span:nth-of-type(1) {
        top: 15px;
        width: 45%;
    }
    .hamburger span:nth-of-type(2) {
        top: 23px;
        width: 35%;
    }
    .hamburger span:nth-of-type(3) {
        top: 31px;
        width: 20%;
    }
    .hamburger.active span{
        background:#00b1a9;
    }
    /*activeクラスが付与されると線が回転して×になる*/
    .hamburger.active span:nth-of-type(1) {
        top: 18px;
        left: 18px;
        transform: translateY(6px) rotate(-135deg);
        width: 30%;
    }
    .hamburger.active span:nth-of-type(2) {
        opacity: 0;
    }
    .hamburger.active span:nth-of-type(3) {
        top: 30px;
        left: 18px;
        transform: translateY(-6px) rotate(135deg);
        width: 30%;
    }
    .wrapper.active #headermenu {
        transition:transform 0.3s ease;
        transform: translateX(0);
    }
    .wrapper.active .menu-overlay{
        display: block
    }
    #index1{
        position:absolute;
        margin-top:0!important;
        top:0;
        left:0;
        right:0;
        margin:auto;
        background-color:rgba(0,0,0,0.7)!important;
        height:100vh;
        width:100vw;
        display: flex;
        justify-content: center;
        align-items: flex-start;
        z-index: 9;
        overflow: scroll;
    }
    .frame{
        padding:15px!important;
        background:#ffffff;
        width:95%;
        font-size:12px;
        margin-top:10px;
    }
    .frame big{
        display: block;
        text-align: center;
    }
    .frame li{
        margin-left:auto!important;
    }
}

@media screen and (max-width: 500px) {
    .titleBTN{
        padding-left:0;
        padding-right:0;
    }
    .titleBTN ul li{
        width:50%;
        margin-bottom:20px;
    }
    .titleBTN ul li:nth-of-type(even){
        padding-right:20px;
        padding-left:10px;
    }
    .titleBTN ul li:nth-of-type(odd){
        padding-left:20px;
        padding-right:10px;
    }
    .titleBTN img{
        max-width:100%;
    }
    ul.navi li{
         width:50%;
    }
    ul.navi li:nth-of-type(odd){
        padding-right:5px;
        padding-left:0;
    }
    ul.navi li:nth-of-type(even){
        padding-left:5px;
        padding-right:0;
    }
    .frame{
        font-size:12px;
    }
    .frame ol{
        margin: 10px 0px 20px 20px!important;
    }
    #index1 p{
        font-size:12px!important;
        padding:10px!important;
    }
    #index1 .frame:first-child{
        position:absolute;
        top:0;
        bottom:0;
        margin:auto;
        overflow: scroll;
        padding-bottom:60px;
    }
}

/******************お問い合わせ・LPリンク**********************/

.link-btn-green a {
    display: block;
    background: linear-gradient(93.57deg, #00B1A9 50.09%, #CCEFEE 99.98%);
    color: #ffffff;
    padding: 30px;
    width: 300px;
    max-width: 100%;
    text-align: center;
    font-weight: bold;
    margin-bottom: 40px;
    text-decoration: none;
    position:relative;
    border-radius: 5px;
}

.btn-arrow:after {
    content: "";
    display: block;
    position: absolute;
    width: 11px;
    height: 18px;
    background: url(../img/arrow-white.png) no-repeat;
    right: 30px;
    top: 0;
    bottom: 0;
    margin: auto;
}

#an403 .link-btn-green a {
    padding:15px;
    background: linear-gradient(93.57deg, #00B1A9 50.09%, #CCEFEE 99.98%);
    border-radius: 999px;
}

@media screen and (max-width: 500px) {
    .link-btn-green a {
        width: 100%;
        padding: 20px;
    }
}