/* Common Parts */
html { font-size:62.5%; overflow-x:hidden; overflow-y: scroll;}
body { font-family: "游ゴシック", YuGothic , "ヒラギノ角ゴ ProN W3", "Hiragino Kaku Gothic ProN", "メイリオ", Meiryo, "Helvetica Neue", Helvetica, Arial, sans-serif; font-weight: 500; overflow-x:hidden; text-align: justify;
text-justify: inter-ideograph; }
button:focus { outline:0; }
.sp-on {display:block !important;}
.tab-on {display:none;}
.pc-on {display:none;}

.ph_swipe { content:''; position:absolute; top:0; left:0;  width:100%; height:100%; background:#f1f1f1; transform:scaleX(0); animation: phSwipe 1.2s ease forwards; }

/* Links */
a, a:hover, a:active, a:focus, a:visited { text-decoration: none; color: #000; }
/* List */
ul, li { margin:0; padding:0; list-style: none;}
/* Web-Fonts */
.unna_r { font-family: 'Unna', serif; font-weight:400; }
.unna_b { font-family: 'Unna', serif; font-weight:700; }
.serif { font-family: "Sawarabi Mincho" , serif; font-weight:400 !important; }


/* Header */
header { position:fixed; width:100%; height:80px; background:#fff; z-index:99; }
.h_logo { position:fixed; top:0; left:20px; width:160px; height:80px; background:none; }
.h_logo img { width:100%; position:absolute; top:50%; transform:translateY(-50%); transition:all .3s ease; }
.h_logo img:hover { opacity:0.6; }
.menu_icon { width:80px; height:80px; background:none; position:fixed; top:0; right:0; border:none; margin:0; padding:0; transition:all .3s ease; }
.menu_icon_line { position:relative; left:17px; width:46px; height:46px; background:none; }
.menu_icon_line span { position:absolute; height:2px; border-radius:1px; background:#787878; display:block; transition:all .3s ease; }
.menu_icon_line span:nth-of-type(1) { width:100%; top:10px; }
.menu_icon_line span:nth-of-type(2) { width:60%; top:50%; transform:translateY(-50%); }
.menu_icon_line span:nth-of-type(3) { width:100%; bottom:10px; }
.menu_icon:hover .menu_icon_line span:nth-of-type(1) { top:8px; }
.menu_icon:hover .menu_icon_line span:nth-of-type(2) { width:40%; }
.menu_icon:hover .menu_icon_line span:nth-of-type(1) { bottom:8px; }
.menu_icon_active .menu_icon_line span:nth-of-type(1) { top:50%; transform:rotate(405deg) translateY(-50%); }
.menu_icon_active .menu_icon_line span:nth-of-type(2) { width:0%; }
.menu_icon_active .menu_icon_line span:nth-of-type(3) { bottom:50%; transform:rotate(-405deg) translateY(50%); }
.menu_icon_active:hover .menu_icon_line span:nth-of-type(1) { top:50%; }
.menu_icon_active:hover .menu_icon_line span:nth-of-type(2) { width:0%; }
.menu_icon_active:hover .menu_icon_line span:nth-of-type(3) { bottom:50%; }

.dnav{ background: rgba(255,255,255,0.9); display: none; height: 100%; position: fixed; width: 100%; }
.dnav_inner { position:relative; width:60%; height:auto; left:20%; top:50%; transform:translateY(-50%); }
.dnav_inner ul { font-size:2.4rem; color:#787878; letter-spacing:2px; }
.dnav_inner a { color:#888; }
.dnav_inner_item { display:none;}
.dnav_inner_item_active { display:block; opacity:0; padding-left:30px; margin-bottom:10px; animation: slideInRight .3s ease-in forwards; transition:all .3s ease; }
.dnav_inner_item_active:hover { margin-left:10px; }
.dnav_inner_item_active:nth-of-type(2) { animation-delay: .1s; }
.dnav_inner_item_active:nth-of-type(3) { animation-delay: .2s; }
.dnav_inner_item_active:nth-of-type(4) { animation-delay: .3s; }
.dnav_inner_item_active:nth-of-type(5) { animation-delay: .4s; }
.h_sns { display:none; }
.h_sns_active { display:flex; flex-wrap:wrap; opacity:0; margin-top:30px; padding-left:30px; justify-content: center; animation: slideInRight .3s ease-in forwards; animation-delay: .5s; }
.h_fb, .h_tw, .h_insta { width:46px; height:46px; position:relative; }
.h_fb a, .h_tw a, .h_insta a { position:absolute; width:100%; height:100%; top:0; left:0; }
.h_fb img, .h_tw img, .h_insta img { position:absolute; top:0; left:0; width:100%; border:none;  transition:all .3s ease; }
.h_fb:hover img, h_tw:hover img, h_insta:hover img { opacity:0.6; }
.h_tw, .h_insta { margin-left:20px; }
.h_blog_btn { position:relative; width:100%; height:48px; border-radius:24px; font-size:1.3rem; color:#787878; margin-top:10px; background:none; border:1px solid #787878; transition:all .3s ease; }
.h_blog_btn::after { content:''; position:absolute; width:8px; height:8px; top:18px; right:13px; border-right:1px solid; border-top:1px solid; border-color:#787878; transform:rotate(45deg); transition:all .3s ease; }
.h_blog_btn:hover { color:#fff; background:#787878; }
.h_blog_btn:hover::after { right:9px; border-color:#fff; }
.gnav { position:absolute; right:40px; width:auto; height:80px; }
.gnav_inner { position:relative; width:auto; height:100%; }
.gnav ul { position:relative; top:50%; transform:translateY(-50%); display:flex; flex-wrap:nowrap; }
.gnav li { position:relative; font-size:1.8rem; letter-spacing:2px; color:#787878; margin-left:30px; display:inline-block; transition:all .3s ease; }
.gnav li:nth-of-type(1) { margin-left:0px; }
.gnav li a { color:#787878; }
.gnav li:hover { margin-top:-2px; }
.gnav li a::after { position:absolute; bottom:-2px; left:0; content:''; width:100%; height:1px; background:#787878; transform: scale(0, 1); transform-origin: right top; transition: transform .3s; }
.gnav li a:hover::after {   transform-origin: left top; transform: scale(1, 1); }


/* footer */
footer { position:relative; width:100%; height:auto; }
.gotop { position:absolute; content:''; width:60px; height:60px; border-radius:50%; background:#f2e8e4; top:0; left:50%; transform:translate(-50%, -50%); z-index:2; transition:all .3s ease; }
.gotop a { display:block; position:absolute; top:0; left:0; width:100%; height:100%; cursor:pointer; }
.gotop::after { position:absolute; content:''; width:12px; height:12px; top:26px; left:25px; border-color:#5c7471; border-top:2px solid; border-right:2px solid; transform:rotate(-45deg); transform-origin:center; }
.gotop:hover { top:-10px; }
.ft_wrapper { position:relative; width:70%; left:15%; padding:80px 0 40px 0; }
.ft_logo { width:100%; }
.ft_logo img { width:100%; }
.ft_navi { width:100%; margin-top:40px; font-size:2.4rem; color:#787878; padding-left:5px; letter-spacing:2px; }
.ft_navi li { margin-bottom:15px; transition:all .3s ease; }
.ft_navi a { color:#787878; }
.ft_navi_inner:hover { padding-left:6px; opacity:0.6; }
.ft_sns { display:flex; flex-wrap:wrap; margin-top:40px; position:relative; width:100%; justify-content: center; }
.ft_fb, .ft_tw, .ft_insta { width:48px; height:48px; position:relative; }
.ft_tw, .ft_insta { margin-left:15px; }
.ft_fb a, .ft_tw a, .ft_insta a { position:absolute; top:0; left:0; width:100%; height:100%; }
.ft_fb img, .ft_tw img, .ft_insta img { width:100%; border:none; transition:all .3s ease; position:absolute; top:0; left:0; }
.ft_fb:hover img, .ft_tw:hover img, .ft_insta:hover img { opacity:0.6; }
.ft_blog_btn { position:relative; top:0; width:100%; height:48px; border-radius:24px; font-size:1.3rem; color:#787878; background:none; border:1px solid #787878; transition:all .3s ease; margin-top:10px; }
.ft_blog_btn::after { content:''; position:absolute; width:8px; height:8px; top:18px; right:13px; border-right:1px solid; border-top:1px solid; border-color:#787878; transform:rotate(45deg); transition:all .3s ease; }
.ft_blog_btn:hover { color:#fff; background:#787878; }
.ft_blog_btn:hover::after { right:9px; border-color:#fff; }
.copyright { font-size:1rem; color:#787878; text-align:center; margin-top:40px; }



/* ContactArea */
.contact_area { position:relative; width:100%; height:auto; margin:0;padding:0; }
.contact_wrap { position:relative; top:0; left:0; display:flex; flex-wrap:wrap; }
.contact_img { width:100%; position:relative; }
.contact_img img { width:100%; top:0;   }
.contact_inner { position:relative; width:100%; background:#5c7471; color:#fbe8e0; padding:60px 40px; }
.contact_inner h2 { font-size:4rem; line-height:80%; margin:0; padding:0; letter-spacing:2px; text-align:center; }
.contact_inner p { margin:30px 0; font-size:1.3rem; line-height:180%; letter-spacing:0px; }
.contact_btn { position:relative; width:100%; height:64px; background:#fbe8e0; border:0; margin-bottom:30px; padding:0; transition:all .3s ease; }
.contact_btn span { position:absolute; top:50%; left:50%; transform:translate(-50%, -50%); font-size:1.3rem; color:#5c7471; display:inline-block;  }
.contact_btn a { position:absolute; width:100%; height:100%; display:block; }
.contact_btn::after, .confirm_btn::after, .submit_btn::after  { content:''; position:absolute; width:20px; height:1px; top:50%; left:0; background:#5c7471; transition:all .3s ease; }
.contact_btn::before, .confirm_btn::before, .submit_btn::before  { content:''; position:absolute; width:8px; height:1px; top:50%; left:12px; background:#5c7471; transition:all .3s ease; }
.contact_btn:hover, .confirm_btn:hover, .submit_btn:hover { box-shadow:3px 3px 8px rgba(50,50,50,0.4); }
.contact_btn:hover::after, .confirm_btn:hover::after, .submit_btn:hover::after  { width:30px; }
.contact_btn:hover::before, .confirm_btn:hover::before, .submit_btn:hover::before  { left:22px; transform:rotate(45deg); transform-origin:bottom right; }




/* Brakepoints */
@media screen and (min-width:360px) {
    .ft_logo img { width:90%; }
}

@media screen and (min-width:480px) {
    .ft_logo img { width:60%; }
}

@media screen and (min-width:760px) {
    .sp-on { display:none !important; }
    .tab-on { display:block !important; }
    .pc-on { display:none; }

    .dnav_inner { left:30%; width:40%; }
    .dnav_inner ul { font-size:3.6rem; }
    .dnav_inner_item_active { margin-bottom:20px; }
    .h_sns_active { margin-top:60px; }
    .h_fb, .h_tw, .h_insta { width:60px; height:60px; }
    .h_blog_btn { height:60px; border-radius:30px; font-size:1.8rem; margin-top:20px; }
    .h_blog_btn::after { width:12px;height:12px; top:22px; right:22px; }
    .h_blog_btn:hover::after { right:16px; }

    .contact_inner h2 { text-align:left; }
    .contact_inner p { font-size:1.4rem; }
    .contact_inner { width:50%; padding:60px 10vw; }
    .contact_wrap { display:flex; flex-wrap:nowrap; flex-direction: row-reverse; height:360px; }
    .contact_img { width:50%; overflow: hidden; }
    .contact_img img { position:absolute; width:auto; height:100%; left:50%; transform:translateX(-50%); }
    .ft_wrapper { display:flex; flex-wrap:wrap; width:80%; left:10%; }
    .gotop { left:90%; }
    .ft_logo { width:60%; }
    .ft_navi { width:40%; }
    .ft_logo img { width:70%; }
    .ft_navi { margin-top:0px; }
    .ft_sns { width:60%; justify-content: flex-start; margin-top:-63px; }
    .ft_blog_btn { width:180px; }
    .copyright { width:100%; margin-top:20px; }
}

@media screen and (min-width:1080px) {
    .sp-on { display:none !important; }
    .tab-on { display:none !important; }
    .pc-on { display:block !important; }

    .contact_wrap { height:420px; }
    .contact_inner { padding:80px 10vw; }
    .contact_inner h2 { font-size:5rem; }
    .contact_inner p { font-size:1.6rem; }
    .contact_btn span { font-size:1.8rem; }
    .contact_btn { height:80px; }
    .contact_img img { transform:scale(1.2) translateX(-50%); transform-origin:left bottom; }
    .ft_wrapper { padding:100px 0 60px 0; }
    .ft_logo, .ft_navi { width:50%; }
    .ft_navi ul { display:flex; flex-wrap:wrap; align-items: center; }
    .ft_navi li { width:50%; height:48px; margin-bottom:30px; }
    .ft_sns { width:100%; margin:10px 0 40px 0; justify-content: center; }
    .ft_blog_btn { width:200px; top:-5px; margin:0; }
    .copyright { margin-top:0px; }
}

@media screen and (min-width:1280px) {
    header { height:100px; }
    .h_logo { height:100px; }
    .gnav { height:100px; }
    .gnav li { font-size:2rem; }
    .ft_logo img { width:50%; }
    .contact_wrap { height:480px; }
    .contact_inner h2 { font-size:6.4rem; }
    .contact_inner { padding:110px 10vw; }
}
@media screen and (min-width:1500px) {
    .contact_img img { width:100%; height:auto; }
}
@media screen and (min-width:1920px) {
    .h_logo { width:200px; }
    .contact_wrap { height:560px; }
    .contact_inner { padding:140px 11vw 140px 15vw; }
    .contact_inner p { margin:40px 0; }
    .contact_inner h2 { font-size:8rem; }
    .ft_wrapper { width:70%; left:15%; }
    .ft_navi { font-size:3.2rem; }
    .ft_navi li { margin-bottom:40px; }
    .ft_tw, .ft_insta { margin-left:20px; }
    .ft_blog_btn { width:240px; }
}
@media screen and (min-width:2560px) {
    header { height:140px; }
    .h_logo { height:140px; left:40px; width:280px; }
    .gnav { height:140px; }
    .gnav li { font-size:3rem; margin-left:60px; }
    .contact_wrap { height:700px; }
    .contact_inner h2 { font-size:12rem; }
    .contact_inner p { font-size:2.4rem; }
    .contact_inner { padding:160px 11vw 160px 15vw; }
    .contact_btn { height:120px; }
    .contact_btn span { font-size:2.4rem; }
    .contact_btn::after, .confirm_btn::after, .submit_btn::after { width:60px;height:2px; }
    .contact_btn::before, .confirm_btn::before, .submit_btn::before { left:40px; width:20px; height:2px; }
    .contact_btn:hover::after, .confirm_btn:hover::after, .submit_btn:hover::after { width:80px; }
    .contact_btn:hover::before, .confirm_btn:hover::before, .submit_btn:hover::before { left:60px; }
    .gotop { width:80px; height:80px; }
    .gotop::after { width:16px; height:16px; top:32px; left:32px; }
    .ft_wrapper { padding:180px 0 60px 0; }
    .ft_sns { margin:30px 0 60px 0; }
    .ft_navi { font-size:4rem; }
    .ft_navi li { height:60px; }
    .ft_fb, .ft_tw, .ft_insta { width:60px; height:60px; }
    .ft_tw, .ft_insta { margin-left:30px; }
    .ft_blog_btn { width:280px; height:60px; border-radius:30px; font-size:1.8rem; top:-8px; }
    .ft_blog_btn::after { top:25px; right:20px; }
    .ft_blog_btn:hover::after { right:15px; }
    .copyright { font-size:1.4rem; }
}

@media screen and (min-width:3840px) {
    header { height:280px; }
    .h_logo { height:280px; left:80px; width:460px; }
    .gnav { height:280px; right:80px; }
    .gnav li { font-size:5.4rem; margin-left:100px; }
    .gnav li a::after { height:2px; }
    .contact_wrap { height:1080px; }
    .contact_inner { padding:240px 11vw 240px 15vw; }
    .contact_inner h2 { font-size:18rem; }
    .contact_inner p { font-size:3.2rem; margin:80px 0; }
    .contact_btn { height:160px; }
    .contact_btn span { font-size:3.6rem; }
    .contact_btn::after, .confirm_btn::after, .submit_btn::after { width:80px; }
    .contact_btn::before, .confirm_btn::before, .submit_btn::before { left:60px; width:20px; }
    .contact_btn:hover::after, .confirm_btn:hover::after, .submit_btn:hover::after { width:100px; }
    .contact_btn:hover::before, .confirm_btn:hover::before, .submit_btn:hover::before { left:80px; }
    .gotop { width:160px; height:160px; }
    .gotop::after { width:32px; height:32px; top:68px; left:66px; }
    .ft_navi { font-size:6rem; }
    .ft_navi li { height:100px; margin-bottom:60px; }
    .ft_wrapper { padding:240px 0 120px 0; }
    .ft_blog_btn { width:380px; height:100px; border-radius:50px; font-size:2.8rem; top:-14px; }
    .ft_blog_btn::after { width:16px; height:16px; top:40px; right:40px; }
    .ft_blog_btn:hover::after { right:35px; }
    .ft_sns { margin:40px 0 100px 0; }
    .ft_fb, .ft_tw, .ft_insta { width:100px; height:100px; }
    .ft_tw, .ft_insta { margin-left:40px; }
    .copyright { font-size:2rem; }
}