@charset "UTF-8";
/* Default */

/*	Reset
------------------------------------------------------------ */ 
@import url("reset.css");

/*	Elements
------------------------------------------------------------ */ 
@import url("elements.css");

/* Links
------------------------------------------------------------ */
a:link{ text-decoration: none; color:#1079be;}
a:visited{ text-decoration: none; color:#1079be;}
a:active { text-decoration: none; color:#1079be;}
a:hover { text-decoration:underline; color:#6a89e4;}



/* smartphone
------------------------------------------------------------ */
@media screen and (max-width: 599px) {
    /* Body
    ------------------------------------------------------------ */
    body {
        font-size:13px;
        line-height:150%;
        color:#333;
        background-repeat:repeat-x;
        font-family:'メイリオ',Meiryo,'Lucida Grande',Verdana,'ヒラギノ角ゴ Pro W3','Hiragino Kaku Gothic Pro','ＭＳ Ｐゴシック',sans-serif;
    }


    /* Header
    ------------------------------------------------------------ */
    header { width: 100%; border-bottom: 1px solid #ccc; margin-bottom: 40px; height: 100px;  background: white; position: fixed; top: 0; left: 0; z-index: 101;}
    header .inner { width: 100%; height: 100px; margin: 0 auto; position: relative; }
    header .inner h1{ width: 160px; height: 100px; position: absolute; top: 30px; left: 10px; }
    header .inner .nav_btn {
        position: absolute;
        top: 50%;
        right: 10px;
        cursor: pointer;
        margin-top: -12px;
        height: 24px;
        width: 24px;
        display: block;
        box-sizing: border-box;
    }
    header .inner .nav_btn div {
        position: absolute;
        right: 10px;
        height: 4px;
        width: 24px;
        background-color: #444;
        border-radius: 2px;
        display: inline-block;
        box-sizing: border-box;
    }
    header .inner .nav_btn div:nth-of-type(1) {
        top: 0;
    }
    header .inner .nav_btn div:nth-of-type(2) {
        top: 10px;
    }
    header .inner .nav_btn div:nth-of-type(3) {
        bottom: 0;
    }
    #close_btn {
        display: block;
        cursor: pointer;
    }
    .dli-close {
        display: inline-block;
        vertical-align: middle;
        color: #333;
        line-height: 1;
        width: 1em;
        height: 0.1em;
        background: currentColor;
        border-radius: 0.1em;
        position: relative;
        transform: rotate(45deg);
        font-size: 31px;
        position: absolute;
        top: 20px;
        right: 10px;
    }

    .dli-close::before {
        content: '';
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        background: inherit;
        border-radius: inherit;
        transform: rotate(90deg);
    }
    header .inner nav{ position: fixed; top: 0; left: 0; width: 100vw; height: 0; overflow: hidden; z-index: 100; background: white; }
    header .inner nav p { margin-bottom: 10px; margin-top: 50px; border-top: 1px solid #ccc; padding-top: 10px; text-align: center;}

    header .inner nav ul li { border-top: 1px solid #ccc; border-bottom: 1px solid #ccc;}
    header .inner nav ul li+ li { border-top: 0; border-bottom: 1px solid #ccc;}

    #menu{ line-height: 200%; text-align: center; margin-top: 30px; }
    #menu li{
        position: relative;
        margin: 0;
        padding: 0;
        text-align: center;
        text-align: left;
        line-height: 100%;
    }

    #menu li a{
        display: block;
        margin: 0;
        padding: 10px 16px;
        color: #000;
        text-decoration: none;
    }
    #menu li a.selected { background:rgba(0,0,0,0.8); color: #fff;}
    #menu li ul{
        margin: 0;
        padding: 0;
    }

    #menu li ul li{
        line-height: 100%;
        overflow: hidden;
        width: 160%;
        color: #fff;

        border-left: none;
        border-right: none;
        margin-left: 20px;
    }
    #menu li ul li:last-child {
        border-bottom: 0;
    }
    #menu li ul li a{
        padding: 10px;
        background:rgba(255,255,255,0.8);
        text-align: left;
    }
    #menu li:hover > a{
        background:rgba(0,0,0,0.8);
        color: #fff;
    }



    /* Icon
    ------------------------------------------------------------ */
    .icon { padding: 10px 40px; line-height: 30px; background: url(../images/icon_arrow.svg) no-repeat; background-position: right center; background-size: 30px 30px;}

    /* SNS
    ------------------------------------------------------------ */
    #sns { max-width:400px; width: 100%; margin:0 auto 60px auto; text-align:center; margin-top:60px;}
    #sns a { display: inline-block; }



    /* お問い合わせ
    ------------------------------------------------------------ */
    #tell { width: 100%; background: #f0f0f0; padding: 40px 0 60px 0;}
    #tell .inner { width: 100%; margin: 0 auto; text-align: center;}
    #tell .inner .tell_title { width: 92vw; text-align: center; background: #0671b0; color: #fff; font-size: 120%; font-weight: bold; margin: 0 auto 20px auto; padding: 8px;}
    #tell .inner a:link{ text-decoration:none; color:#000;}
    #tell .inner a:visited{ text-decoration:none; color:#000;}
    #tell .inner a:active { text-decoration:none; color:#000;}
    #tell .inner a:hover { text-decoration:underline; color:#6a89e4;}
    #tell .inner td { text-align: left;}
    #tell .inner td p.font160 { font-size: 100%;}

    /* Footer
    ------------------------------------------------------------ */
    footer {background: #0671b0; padding: 40px 0 200px 0;}
    footer .inner { width: 100%; margin: 0 auto; color: #fff; text-align: center;}
    footer .inner ul { margin-bottom: 10px;}
    footer .inner li { border-left: 1px solid #ccc; border-right: 1px solid #ccc; padding: 0 10px; display: inline;}
    footer .inner li+ li { border-left: 0; border-right: 1px solid #ccc;}

    footer .inner a:link{ text-decoration: none; color:#fff;}
    footer .inner a:visited{ text-decoration: none; color:#fff;}
    footer .inner a:active { text-decoration: none; color:#fff;}
    footer .inner a:hover { text-decoration:underline; color:#fff;}
}



/* tablet
------------------------------------------------------------ */
@media screen and (min-width: 600px) {
    /* Body
    ------------------------------------------------------------ */
    body {
        font-size:13px;
        line-height:150%;
        color:#333;
        background-repeat:repeat-x;
        font-family:'メイリオ',Meiryo,'Lucida Grande',Verdana,'ヒラギノ角ゴ Pro W3','Hiragino Kaku Gothic Pro','ＭＳ Ｐゴシック',sans-serif;
    }


    /* Header
    ------------------------------------------------------------ */
    header { width: 100%; border-bottom: 1px solid #ccc; margin-bottom: 40px;}
    header .inner { width: 100%; margin: 0 auto;}
    header .inner h1{ width: 160px; height:auto; float: left; margin-left: 10px; margin-top:30px;}
    header .inner .nav_btn, .dli-close { display: none; }
    header .inner nav{ float: right; padding: 10px 0 0 0; width: calc(100% - 200px);}
    header .inner nav p { text-align: right; margin-bottom: 10px; margin-right: 10px;}

    header .inner nav ul li { border-left: 1px solid #ccc; border-right: 1px solid #ccc;}
    header .inner nav ul li+ li { border-left: 1px solid #ccc; border-right: 1px solid #ccc;}

    #menu{ line-height: 200%;}
    #menu li{
        position: relative;
        float: left;
        margin: 0 0 10px -1px;
        padding: 0;
        text-align: center;
    }
    #menu li ul.sub-menu li {
        margin: 0;
    }
    #menu li a{
        display: block;
        margin: 0;
        padding: 0 16px;
        color: #000;
        text-decoration: none;
    }
    #menu li a.selected { background:rgba(0,0,0,0.8); color: #fff;}
    #menu li ul{
        position: absolute;
        top: 100%;
        left: 0;
        margin: 0;
        padding: 0;
        z-index: 100;
    }

    #menu li ul li{
        line-height: 100%;
        overflow: hidden;
        width: 160%;
        height: 0;
        color: #fff;

        border-left: none;
        border-right: none;
    }
    #menu li ul li a{
        padding: 10px;
        background:rgba(255,255,255,1.0);
        text-align: left;
    }
    #menu li:hover > a{
        background:rgba(0,0,0,0.8);
        color: #fff;
    }
    #menu li:hover ul li{
        overflow: visible;
        height: 100%;
    }



    /* Icon
    ------------------------------------------------------------ */
    .icon { padding: 10px 40px; line-height: 30px; background: url(../images/icon_arrow.svg) no-repeat; background-position: right center; background-size: 30px 30px;}

    /* SNS
    ------------------------------------------------------------ */
    #sns { width:400px; margin:0 auto 60px auto; text-align:center; margin-top:60px;}
    #sns a { display: inline-block; }



    /* お問い合わせ
    ------------------------------------------------------------ */
    #tell { width: 100%; background: #f0f0f0; padding: 40px 0 60px 0;}
	#tell .inner { width: 92vw; margin: 0 auto; text-align: center;}
	#tell .inner .tell_title { width: calc(92vw - 16px); text-align: center; background: #0671b0; color: #fff; font-size: 120%; font-weight: bold; margin: 0 auto 20px auto; padding: 8px;}
    #tell .inner a:link{ text-decoration:none; color:#000;}
    #tell .inner a:visited{ text-decoration:none; color:#000;}
    #tell .inner a:active { text-decoration:none; color:#000;}
    #tell .inner a:hover { text-decoration:underline; color:#6a89e4;}
    #tell .inner td { text-align: left;}

    /* Footer
    ------------------------------------------------------------ */
    footer {background: #0671b0; padding: 40px 0 200px 0;}
    footer .inner { width: 600px; margin: 0 auto; color: #fff; text-align: center;}
    footer .inner ul { margin-bottom: 10px;}
    footer .inner li { border-left: 1px solid #ccc; border-right: 1px solid #ccc; padding: 0 10px; display: inline;}
    footer .inner li+ li { border-left: 0; border-right: 1px solid #ccc;}

    footer .inner a:link{ text-decoration: none; color:#fff;}
    footer .inner a:visited{ text-decoration: none; color:#fff;}
    footer .inner a:active { text-decoration: none; color:#fff;}
    footer .inner a:hover { text-decoration:underline; color:#fff;}
}



/* PC
------------------------------------------------------------ */
@media screen and (min-width: 1025px) {
    /* Body
    ------------------------------------------------------------ */
    body {
        font-size:13px;
        line-height:150%;
        color:#333;
        background-repeat:repeat-x;
        font-family:'メイリオ',Meiryo,'Lucida Grande',Verdana,'ヒラギノ角ゴ Pro W3','Hiragino Kaku Gothic Pro','ＭＳ Ｐゴシック',sans-serif;
    }


    /* Header
    ------------------------------------------------------------ */
    header { width: 100%; border-bottom: 1px solid #ccc; margin-bottom: 40px; height: 100px; position: relative; z-index: 1;}
    header .inner { width: 1000px; margin: 0 auto;}
    header .inner h1{ width: 160px; height:auto; float: left; margin-top:29px;}
    header .inner .nav_btn, .dli-close { display: none; }
    header .inner nav{ float: right; padding: 10px 0 0 0;}
    header .inner nav p { text-align: right; margin-bottom: 10px;}

    header .inner nav ul li { border-left: 1px solid #ccc; border-right: 1px solid #ccc;}
    header .inner nav ul li+ li { border-left: 0; border-right: 1px solid #ccc;}

    #menu{ line-height: 200%;}
    #menu li{
        position: relative;
        float: left;
        margin: 0;
        padding: 0;
        text-align: center;
    }

    #menu li a{
        display: block;
        margin: 0;
        padding: 0 16px;
        color: #000;
        text-decoration: none;
    }
    #menu li a.selected { background:rgba(0,0,0,0.8); color: #fff;}
    #menu li ul{
        position: absolute;
        top: 100%;
        left: 0;
        margin: 0;
        padding: 0;
    }

    #menu li ul li{
        line-height: 100%;
        overflow: hidden;
        width: 160%;
        height: 0;
        color: #fff;

        border-left: none;
        border-right: none;
    }
    #menu li ul li a{
        padding: 10px;
        background:rgba(255,255,255,0.8);
        text-align: left;
    }
    #menu li:hover > a{
        background:rgba(0,0,0,0.8);
        color: #fff;
    }
    #menu li:hover ul li{
        overflow: visible;
        height: 100%;
    }



    /* Icon
    ------------------------------------------------------------ */
    .icon { padding: 10px 40px; line-height: 30px; background: url(../images/icon_arrow.svg) no-repeat; background-position: right center; background-size: 30px 30px;}

    /* SNS
    ------------------------------------------------------------ */
    #sns { width:400px; margin:0 auto 60px auto; text-align:center; margin-top:60px;}
    #sns a { display: inline-block; }



    /* お問い合わせ
    ------------------------------------------------------------ */
    #tell { width: 100%; background: #f0f0f0; padding: 40px 0 60px 0;}
    #tell .inner { width: 1000px; margin: 0 auto; text-align: center;}
    #tell .inner .tell_title { width: 600px; text-align: center; background: #0671b0; color: #fff; font-size: 120%; font-weight: bold; margin: 0 auto 20px auto; padding: 8px;}
    #tell .inner a:link{ text-decoration:none; color:#000;}
    #tell .inner a:visited{ text-decoration:none; color:#000;}
    #tell .inner a:active { text-decoration:none; color:#000;}
    #tell .inner a:hover { text-decoration:underline; color:#6a89e4;}
    #tell .inner td { text-align: left;}

    /* Footer
    ------------------------------------------------------------ */
	footer {background: #0671b0; padding: 40px 0 200px 0;}
    footer .inner { width: 1000px; margin: 0 auto; color: #fff; text-align: center;}
    footer .inner ul { margin-bottom: 10px;}
    footer .inner li { border-left: 1px solid #ccc; border-right: 1px solid #ccc; padding: 0 10px; display: inline;}
    footer .inner li+ li { border-left: 0; border-right: 1px solid #ccc;}

    footer .inner a:link{ text-decoration: none; color:#fff;}
    footer .inner a:visited{ text-decoration: none; color:#fff;}
    footer .inner a:active { text-decoration: none; color:#fff;}
    footer .inner a:hover { text-decoration:underline; color:#fff;}

}