@charset "UTF-8";
/* CSS Document */
@font-face
{
font-family: Hannari;
src: url('https://tamagoyu.jp/font/hannari.woff')
     format("woff");
}
/* ===================================================
	Reset
====================================================== */
#customer_header {font-family: "Hannari",YuMincho, "Yu Mincho", "Hiragino Mincho ProN", "serif";font-weight: 400;}

#customer_header h1,
#customer_header h2,
#customer_header h3,
#customer_header h4,
#customer_header h5,
#customer_header h6,
#customer_footer h1,
#customer_footer h2,
#customer_footer h3,
#customer_footer h4,
#customer_footer h5,
#customer_footer h6 { margin: 0;}

#customer_header ul,
#customer_header ol,
#customer_header li,
#customer_footer ul,
#customer_footer ol,
#customer_footer li { padding: 0; margin: 0; list-style-type: none;}

#customer_header dl,
#customer_footer dl { padding: 0; margin: 0;}

#customer_header p,
#customer_footer p { padding: 0; margin: 0;}

#customer_footer address { padding: 0; margin: 0;}

#customer_header img,
#customer_footer img { max-width: 100%;}


#customer_header a,
#customer_footer a{ color:#555; text-decoration:none; transition: all 0.5s;}
#customer_header a img,
#customer_footer a img{ transition: all 0.5s;}
#customer_header a:hover,
#customer_footer a:hover{ color:#888;text-decoration:none;}
#customer_header a:hover img,
#customer_footer a:hover img { opacity: 0.75;}
body {
        background:#fff;
        font-size: 16px; font-weight: normal; line-height: 1.5;
        font-family:"游ゴシック体", YuGothic, "游ゴシック", "Yu Gothic", メイリオ, Meiryo, 'Hiragino Kaku Gothic Pro', 'ヒラギノ角ゴ Pro W3', 'ＭＳ Ｐゴシック', Verdana, sans-serif;
        -webkit-text-size-adjust: 100%;
        min-width: 1140px; min-height: 100vh;letter-spacing: 0.06em; }
@media screen and (orientation:landscape) {
	body { width: 100%;}
}
@media screen and (max-width: 768px) {
	body { min-width: 0;}
}



/* ---------------------------------------------------
Header
------------------------------------------------------ */
#customer_header #top_area { position: relative; z-index:50;}
#customer_header #top_area #main_img{ width:100%; height:inherit;}
#customer_header #top_area #sp_img { display: none; position: relative; overflow : hidden; width: 100%; height:300px; margin: auto; background : #fff;}
#customer_header #top_area #sp_img.slide img { display : block; position: absolute; width:100%; height:auto; opacity: 0; 
                animation: slideAnime 9s ease infinite;}
#customer_header #top_area #sp_img.slide img:nth-of-type(1) { animation-delay: 0s }
#customer_header #top_area #sp_img.slide img:nth-of-type(2) { animation-delay: 3s }
#customer_header #top_area #sp_img.slide img:nth-of-type(3) { animation-delay: 6s }
@keyframes slideAnime{
0% { opacity: 0 }
3% { opacity: 1 }
33% { opacity: 1 }
36% { opacity: 0 }
100% { opacity: 0 }
}

/*#customer_header .top_img h1 { position: absolute;top:50px; left:10%;}
#customer_header #top_area .h_inq{z-index: 99;position:absolute;top:50px;right:10%;}
#customer_header #top_area .h_inq img {opacity:0.8;}*/
#customer_header #top_area nav {display: block; position: relative; background:#182349; width:100%;}
#customer_header #top_area nav ul{display: flex; margin: 0 auto; justify-content: space-between;-webkit-justify-content: space-between; width:1200px;}
#customer_header #top_area nav li{ flex-grow: 1;}
#customer_header #top_area nav li a{ color:#fff; display:block; font-size:21px;padding: 15px 2px;text-align:center;}

#customer_header #header_area { display: block; position: relative; z-index:51; background:#fff; width:100%;}
#customer_header #header_area h1 { position: relative; top:5px; left:10%; width:400px;}
#customer_header #header_area p { position:absolute; top:15px; right:10%; font-family: YuMincho, "Yu Mincho", "Hiragino Mincho ProN", "serif"; font-size:14px; letter-spacing: 0;}
#customer_header #header_area p b span { border:1px solid; border-radius: 3px; font-size:12px; padding:2px; display: inline-block; margin-right:6px; position: relative; top:-6px;}
#customer_header #header_area p b { display: block; font-size:30px; font-weight: normal; }
#customer_header #br_area { background:url(https://storage.489ban.net/storage/customer/665/489ban/img/best_bg.jpg); background-size:1800px auto;padding:50px 0;}
#customer_header #br_area dl { display: flex; margin:0 auto; width:1050px;}
#customer_header #br_area dt { width:51%; }
#customer_header #br_area dt img{ margin-top:20px;width:95%;}
#customer_header #br_area dd { width:49%;}
#customer_header #br_area dd img {margin-left:10%;width:90%;}

#customer_header #header_wrap { background:#182349; position: fixed; left: 0; top:0; display:flex; padding:3px 0; z-index:45; width:100%;}
#customer_header #header_wrap .h_inner{ width:90%; max-width:1400px; margin:0 auto; position:relative;
	display:flex; display: -webkit-flex; flex-wrap:wrap; 
    align-items:center; justify-content: space-between; -webkit-justify-content: space-between;}
#customer_header #header_wrap .h_logo {display: block; width:220px;}
#customer_header #header_wrap .h_logo a,
#customer_header #header_wrap .h_logo img { width:100%;}
#customer_header #header_wrap nav{ flex:1; }
#customer_header #header_wrap #nav_content {}
#customer_header #header_wrap .gnav { margin-top:-20px; display:flex;justify-content: space-between;-webkit-justify-content: space-between;}
#customer_header #header_wrap .gnav li {flex-grow: 1;}
#customer_header #header_wrap .gnav li a{ color:#fff; font-size:17px; padding: .8em 2%; text-align:center;width:100%; display: block;}
#customer_header #header_wrap .gnav li a:hover{color:#aaa; }
#customer_header #header_wrap .h_inq {top:0;right:10%; height:65px;}
#customer_header #header_wrap .h_inq img{ opacity:1; height:65px;}
#customer_header #header_wrap .nav_tel,
#customer_header #header_wrap .nav_plan,
#customer_header #header_wrap #nav-open,
#customer_header #nav-drawer input{ display:none;}

@media screen and ( max-width:995px) {
            #customer_header #top_area h1 img,
            #customer_header #top_area nav,
            #customer_header #top_area .h_inq,
            #customer_header #header_wrap .h_inq{ display: none;}
            #customer_header #header_wrap .nav_tel,
            #customer_header #header_wrap .nav_plan{ display: block;}
            #customer_header #header_wrap { z-index: 999; height:50px;}
            #customer_header #header_wrap .h_inner{ width:90%; max-width:90%; height:50px;}
            #customer_header #header_wrap .h_logo { position: absolute;}
           
            #customer_header #top_area { margin-top:50px;}
            #customer_header #header_area { display: none;}
            #customer_header #br_area dl {width:92%;}
            
            #customer_header #nav-toggle {position:fixed; z-index: 999; background: #182349; display: inline-block; width: 38px; height: 35px;vertical-align: middle; padding:10px; right:2%; top:0;}
            #customer_header #nav-toggle a{ display: block; height:100%; width:100%; }
            #customer_header #nav-toggle,
            #customer_header #nav-toggle a span { display: inline-block; transition: all .4s; box-sizing: border-box;border-radius: 3px;}
            #customer_header #nav-toggle a span { background: #f4f3f1; position: absolute; left: 0; height: 3px; margin:0 0; width: 100%; }
            #customer_header #nav-toggle a span:nth-child(1) { top: 8px; }
            #customer_header #nav-toggle a span:nth-child(2) { top: 17px; }
            #customer_header #nav-toggle a span:nth-child(3) { top: 26px; }
            #customer_header #nav-toggle a span:nth-of-type(4) { bottom: 8px; background: none; color: #000; left:-1px;width:100%;}
            #customer_header #nav-toggle a span:nth-of-type(4):before { content: "MENU"; font-size: 11px; color:#fff;font-family: "Times New Roman", Times, "serif";}
            #customer_header:target #nav-toggle a span:nth-child(1) { top: 22px; -webkit-transform: rotate(210deg); -moz-transform: rotate(210deg); transform: rotate(210deg); }
            #customer_header:target #nav-toggle a span:nth-child(2) { width: 0; left: 50%; }
            #customer_header:target #nav-toggle a span:nth-child(3) { top: 22px; -webkit-transform: rotate(-210deg); -moz-transform: rotate(-210deg); transform: rotate(-210deg) ; }
            #customer_header:target #nav-toggle a span:nth-of-type(4):before { content: "CLOSE"; font-size: 10px;color:#f4f3f1; }
            #customer_header #nav-toggle a[href="#close"] {display: none;position: absolute;top: 0;left: 0;height: 100%;width: 100%;z-index: 10;}
            #customer_header:target #nav-toggle a[href="#close"] {display: block;}
            #customer_header #nav_content {display: block; background: #182349; margin:0; position: fixed; top: 50px; right: 0;
                padding: 3em 0; overflow: auto; z-index: 99999; width: 90%; max-width: 300px; height:-webkit-calc(100% - 50px);height:calc(100% - 50px);
                transition: .3s ease-in-out; -webkit-transform: translateX(105%);transform: translateX(105%);}
             #customer_header:target #nav_content {-webkit-transform: translateX(0%);transform: translateX(0%);box-shadow: 6px 0 25px rgba(0,0,0,.15);}
            #customer_header #header_wrap .gnav { flex-direction: column;}
            #customer_header #header_wrap .gnav li a {font-size:21px;}
            .nav_tel{margin: 1em auto; width: 50%;}
            .nav_plan a {display: block;text-align: center;width: 80%;padding: 8px 0;margin: 0 auto;background: rgba(255,255,255,0.8);}
            #customer_header #nav-close {display: none; position: fixed; z-index: 99; top: 0;left: 0;width: 100%;height: 100%;background: black;opacity: 0;transition: .3s ease-in-out;}
}

@media screen and ( max-width:600px) {
            #customer_header #top_area #main_img{display: none;}
            #customer_header #top_area #sp_img {display: block;}
            
            #customer_header #br_area{ padding:10px 0;}
            #customer_header #br_area dl { display: block;}
            #customer_header #br_area dt { width:100%; }
            #customer_header #br_area dt img{ margin:10px 10%;width:80%;}
            #customer_header #br_area dd { width:100%; }
            #customer_header #br_area dd img {margin:10px 12%;width:76%;}
}
@media screen and ( max-width:375px) {
            #customer_header #header_wrap .h_logo {width:180px;}
            #customer_header #top_area #sp_img {height:250px;}
            #customer_header #top_area #sp_img.slide img { width:110%; }
}
@media screen and ( max-width:320px) {
            #customer_header #top_area #sp_img {height:220px;}
}


/* ---------------------------------------------------
Footer
------------------------------------------------------ */
#customer_footer #footer_wrap{ background: url(https://tamagoyu.jp/tamago-yu/wp-content/themes/tamagoyu-wp/images/washi-bg.jpg);position: relative;}
#customer_footer #footer_area{ width: 90%; max-width: 1200px; padding: 4em 0; margin: 0 auto; position:relative; display: flex; flex-wrap: wrap;justify-content: space-between; }
#customer_footer #footer_area .f_nav{ flex:1; display:flex; flex-wrap:wrap;}
#customer_footer #footer_area .f_inq{ max-width:420px;}
#customer_footer #footer_area .f_nav ul{ margin:0 3em 1em 0;}
#customer_footer #footer_area .f_nav li{ margin:0 0 .5em 0;}
#customer_footer #footer_area .f_nav li a:before{ content:"\00bb"; display:inline-block; margin:0 5px 0 0;}
#customer_footer #footer_area .to_top { position: fixed; bottom: 60px; right: 8%; z-index: 50;}
#customer_footer #footer_area .to_top a{display: block; text-decoration: none; background: #182349; width: 60px; line-height: 60px; text-align: center; color: #fff;}
#customer_footer #footer_area .to_top img{ vertical-align: middle;}
#customer_footer address{ padding:20px 0; font-style:normal;}
#customer_footer .copy{ background: #182349; text-align: center; color:#fff; margin: 0;}
#customer_footer .copy a{ color:#fff;}


@media screen and ( max-width:375px) {
            #customer_footer #footer_area .to_top { bottom: 10px;}
            #customer_footer #footer_area .to_top a{ width: 30px; line-height: 30px; }
}