@charset "UTF-8";

/* ------------------------------------------
	BASIC STYLES
--------------------------------------------- */

*,*:before,*:after {
	-webkit-box-sizing:border-box;
	-moz-box-sizing:border-box;
	-o-box-sizing: border-box;
	-ms-box-sizing: border-box;
	box-sizing:border-box;
}  

html,body,header,footer,nav,
article,section,address,aside,figure,div,
h1,h2,h3,h4,h5,h6,
p,blockquote,pre,dl,dt,dd,ol,ul,li,hr,img,
fieldset,legend,form,label,
th,td,
menu,details,summary {
	margin:0 auto;
	padding:0;
	border:0;
}

img {
	display:block;
	width:100%;
    z-index:9;
}

body {
    position: relative;
    color:#250d00;
	background-color:#fff;
	font-family: "ヒラギノ角ゴ ProN", "Hiragino Kaku Gothic ProN", "游ゴシック Medium", "游ゴシック体", "Yu Gothic Medium", YuGothic, "メイリオ", Meiryo, "ＭＳ Ｐゴシック", "MS PGothic", sans-serif;
	font-weight:600;
	-webkit-text-size-adjust:100%;
	-ms-text-size-adjust:100%;
	text-size-adjust:100%;
	text-align:center;
    line-height:1.6;	
    min-height: 100%;
	background-image: url("../img/background.jpg");
    background-size:100%;
	animation: fadeIn 3s ease-in-out 0s 1 normal backwards;
    -webkit-animation: fadeIn 3s ease-in-out 0s 1 normal backwards;
}

@keyframes fadeIn {
    0% {opacity: 0}
    100% {opacity: 1}
}
@-webkit-keyframes fadeIn {
    0% {opacity: 0}
    100% {opacity: 1}
}

html, main{
    height:100%;
}

main{
    width:80%;
    margin:0 auto;
    padding-top:210px;    /* メニューのための余白 */
    padding-bottom:20px;    /* メニューのための余白 */
    background-color: rgba(255,255,255,0.5);
    z-index:9;
}

@media(max-width:599px){
    main{
        width:90%;
        padding-top:130px;
    }
}

@media(min-width:600px) and (max-width:959px){
    main{
        padding-top:170px;
    }
}

/* ------------------------------------------
	h1-h4
--------------------------------------------- */

h1{
    font-size:40px;
    font-weight: bold;
    width:80%;
    box-shadow: 0px -6px 5px -5px #ff5500 inset, 0px 8px 4px -8px #ff3311;
}

h2 {
    font-size:32px;
    font-weight: bold;
    width:70%;
    margin:56px auto;
    padding:24px;
    border: 3px solid #ffc489;
    border-radius: 3em .7em 2em .7em/.7em 2em .7em 3em;
    background-color: rgba(255,255,255,0.5);
}

@media(max-width:599px){
    h1{
        font-size:20px;
        width:90%;
    }
    h2{
        font-size:16px;
        width:90%;
        margin:28px auto;
        padding:12px;
    }
}

@media(min-width:600px) and (max-width:959px){
    h1{
        font-size:30px;
        width:80%;
    }
    h2{
        font-size:26px;
        width:80%;
        padding:16px;
    }
}

/* ------------------------------------------
	GLOBAL
--------------------------------------------- */
p {
    font-size:16px;
    font-weight: 500;
    margin:40px;
}
article{
    width:100%;
}
section{
    margin:80px auto;
}

@media(max-width:599px){
    p {
        margin:40px 24px;
    }
    article{
        width:90%;
    }
    section{
        margin:40px auto;
    }
}

@media(min-width:600px) and (max-width:959px){

}

@media(min-width:960px) and (max-width:1280px){

}


/* ------------------------------------------
	CLEARFIX
--------------------------------------------- */
header:after,
nav:after,
section:after,
ul:after,
.clearfix:after
{
	content:" ";
	display:block;
    clear:both;
    overflow: hidden;
    zoom: 1;
}

/* ------------------------------------------
	HEADER
--------------------------------------------- */

header {
    font-weight:bold;
    position:fixed;
	border-top: solid 2px #ff8c00;
    width:100%;
    z-index:999;
    background-color:#ffffe0;
}

header .img_line{
	height:16px;
}
header .logo{
	float:left;
	margin-left:32px;
	width: 136px;
}

@media(max-width:599px){

    header .logo{
        margin-left:8px;
        width: 96px;
    }
}

@media(min-width:600px) and (max-width:959px){

    header .logo{
        margin-left:16px;
        width: 112px;
    }
}

@media(min-width:960px) and (max-width:1280px){

    header .logo{
        margin-left:24px;
        width: 128px;
    }
}

/* ------------------------------------------
	NAV
--------------------------------------------- */
    
/* #wrapper{
    overflow:hidden;
} */

.navDrawr {
    width:80%;
    margin-top:33px;
    margin-right:0;
}
.navDrawr>ul:after {
    content: ".";
    display: block;
    clear: both;
    height: 0;
    visibility: hidden;
}
.navDrawr>ul>li {
    position: relative;
	float: left;
	width: 20%;
}
.navDrawr a {
    display: block;
    padding: 16px 0;
    background-color: #ffffe0;
}
.navDrawr .sub {
    position: absolute;
    left: 0;
    right: 0;
    z-index: 9999;
}
.navDrawr .sub li a{
	border-top: 1px dashed #ffc489;
}

header a:link,
header a:visited,
header a:hover,
header a:active,
header a:focus{
	color:#6c2c2f;
	text-decoration: none;
}
.navDrawr a:hover,
.navDrawr a:active,
.navDrawr a:focus{
	background-color:#ffffa8;
}

button, .navTelBtn a{
    display:none;
}

@media(max-width:599px){

    .navDrawr {
        position: fixed;
        width: 220px;
        top: 49px;
        bottom: 0;
        right: -1600px;
        overflow: auto;
        -webkit-overflow-scrolling: touch;
        z-index:999;
    }
    .overlay {
        display: none;
        background-color: rgba(0,0,0,0.50);
        position: fixed;
        top: 0;
        bottom: 0;
        left: 0;
        right: 0;
        z-index:99;
    }

    /*メニューボタン*/
    .btn_menu {
        display: block;
        position: absolute;
        letter-spacing: 0.1em;
        text-align: center;
        outline: none;
        padding:5px 0;
        top: 16px;
        right: 0;
        bottom: 0;
        width: 64px;
        height: 64px;
        border: none;
        color: #fff;
        background-color: #ffa500;
        cursor: pointer;
        z-index: 1000;
    }
    .btn_menu span{
        display: block; 
    }
    .btn_menu span.bar {
        margin:8px auto;
        width:50%;
        height:2px;
        background-color: #fff;
        transition: all 0.3s;
        transform-origin: 0 0;
    }
    .btn_menu span:nth-of-type(3) {
        margin:8px auto 5px;
    }
    .btn_menu .menu, btn_menu .close, .btn_menu.active .menu, .btn_menu.active .close{
        font-size: 1.2em;
    }
    .btn_menu .close {
        display: none;
    }
    .btn_menu.active span:nth-of-type(1) {
        -webkit-transform: translateX(3px) rotate(40deg);
        transform: translateX(3px) rotate(38deg);
    }
    .btn_menu.active span:nth-of-type(2)  {
        opacity: 0;
    }
    .btn_menu.active span:nth-of-type(3)  {
        -webkit-transform:  translateX(3px) rotate(-40deg);
        transform: translateX(3px) rotate(-38deg);
    }
    .btn_menu.active .menu {
        display: none;
    }
    .btn_menu.active .close {
        display: block;
    }

    /*電話アイコン*/
    .navTelBtn a {
        display: block;
        position: absolute;
        top: 16px;
        bottom: 0;
        right: 64px;
        width: 64px;
        height: 64px;
        background-color:#ffa07a;
    }
    .navTelBtn img {
        width:80%;
        position: absolute;
        top: 0;
        right: 0;
        bottom: 0;
        left: 0;
        margin: auto;
    }

    /*メインメニュー*/
    .navDrawr>ul>li {
        float: none;
        width: auto;
    }
    .navDrawr>ul>li>a{
        font-size:0.95em;
        text-align: left;
        padding:13px 24px; 
        height:48px;
		border-top: 1px solid #ffc489;
    }
    .navDrawr>ul>li>a::before {
        position: absolute;
        display: block;
        content: "";
        top: 24px;
        right:24px;
        left: 10px;
        height: 3px;
        width: 8px;
        background-color: #ff8c00;
    }

    /*サブメニュー*/
    .navDrawr .sub {
        position: static;
        display: block!important;
    }
    .navDrawr .sub a{
        text-align: left;
        font-size: 0.95em;
        height:40px;
        padding:8px 24px; 
    }
}

@media(min-width:600px) and (max-width:959px){
    
    .navDrawr {
        position: fixed;
        width: 270px;
        top: 59px;
        bottom: 0;
        right: -1600px;
        overflow: auto;
        -webkit-overflow-scrolling: touch;
    }
    .overlay {
        display: none;
        background-color: rgba(0,0,0,0.50);
        position: fixed;
        top: 0;
        bottom: 0;
        left: 0;
        right: 0;
        z-index:99;
    }

    /*メニューボタン*/
    .btn_menu {
        display: block;
        position: absolute;
        letter-spacing: 0.1em;
        text-align: center;
        outline: none;
        padding:5px 0;
        top: 16px;
        right: 0;
        bottom: 0;
        width: 75px;
        height: 75px;
        border: none;
        color: #fff;
        background-color: #ffa500;
        cursor: pointer;
        z-index: 1000;
    }
    .btn_menu span{
        display: block; 
    }
    .btn_menu span.bar {
        margin:8px auto;
        width:50%;
        height:2px;
        background-color: #fff;
        transition: all 0.3s;
        transform-origin: 0 0;
    }
    .btn_menu span:nth-of-type(3) {
        margin:8px auto 5px;
    }

    .btn_menu .menu, btn_menu .close, .btn_menu.active .menu, .btn_menu.active .close{
        font-size: 1.1em;
    }
    .btn_menu .close {
        display: none;
    }
    .btn_menu.active span:nth-of-type(1) {
        -webkit-transform: translateX(3px) rotate(33deg);
        transform: translateX(3px) rotate(33deg);
    }
    .btn_menu.active span:nth-of-type(2)  {
        opacity: 0;
    }
    .btn_menu.active span:nth-of-type(3)  {
        -webkit-transform: translateX(3px) rotate(-33deg);
        transform: translateX(3px) rotate(-33deg);
    }
    .btn_menu.active .menu {
        display: none;
    }
    .btn_menu.active .close {
        display: block;
    }

    /*電話アイコン*/
    .navTelBtn a {
        display: block;
        position: absolute;
        top: 16px;
        bottom: 0;
        right: 75px;
        width: 75px;
        height: 75px;
        background-color:#ffa07a;
    }
    .navTelBtn img {
        width:80%;
        position: absolute;
        top: 0;
        right: 0;
        bottom: 0;
        left: 0;
        margin: auto;
    }

    /*メインメニュー*/
    .navDrawr>ul>li {
        float: none;
        width: auto;
    }
    .navDrawr>ul>li>a{
        text-align: left;
        padding:15px 24px; 
        height:56px;
		border-top: 1px solid #ffc489;
    }
    .navDrawr>ul>li>a::before {
        position: absolute;
        display: block;
        content: "";
        top: 24px;
        right:24px;
        left: 10px;
        height: 3px;
        width: 8px;
        background-color: #ff8c00;
    }

    /*サブメニュー*/
    .navDrawr .sub {
        position: static;
        display: block!important;
    }
    .navDrawr .sub li a{
        text-align: left;
        font-size: 0.9em;
        height:48px;
        padding:12px 24px; 
    }
}

@media(min-width:960px) and (max-width:1280px){

    .navDrawr {
        width:80%;
        margin-top:31px;
    }
    .navDrawr a{
        font-size:0.9em;
        padding-right:1px;
        padding-left:1px;
    }
}

/* ------------------------------------------
	FOOTER
--------------------------------------------- */

footer {
    margin-top: auto;
    bottom:0;
    width:100%;
    border-bottom: solid 1px #ff8c00;
    color:#6c2c2f;
    background-color:#ffffe0;
}
footer p{
    font-weight:600;
    text-align:center;
    margin:0 auto;
}
footer a:link,
footer a:visited,
footer a:hover,
footer a:active,
footer a:focus{
	color:#6c2c2f;
	text-decoration: none;
}
footer a:hover,
footer a:active,
footer a:focus{
	text-decoration: underline #6c2c2f;
}
footer .img_line{
	height:16px;
}

/* 会社情報 */
#infoarea{
    display:flex;
    align-items:flex-end;
    width:80%;
    margin:0 auto;
    left:0;
    right:0;
    /* border-bottom: solid 1px #d2b48c; */
}
#infoarea .information{
    margin-left:0;
    text-align:left;
    line-height:1.8em;
    margin-left:0;
    padding:50px 0 100px;
}
#infoarea .information span:first-child{
    font-size:1.3em;
    padding-bottom:5px;
    box-shadow: 0px -6px 5px -5px #ff5500 inset, 0px 8px 4px -8px #ff3311;
}
#infoarea .information span:last-child{
    font-size:0.95em;
    padding-left:8.5em;
}
#infoarea .image{
    display:flex;
    justify-content: flex-end;
    margin-right:0;
}
#infoarea .image img{
    margin:0;
    width: auto;
    max-height: 140px;
}
#infoarea .image img:nth-of-type(2){
    margin-right:3%;
}

#infoarea .image img:nth-of-type(3){
    margin-right:8%;
}
#infoarea .image img:nth-of-type(4){
    margin-right:8%;
}

/* ナビゲーション */
#linkarea{
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    margin:0 auto;
    padding:16px 0;
    width:90%;
    border-top: solid 1px #d2b48c;
}
#linkarea li{
    margin:0;
}
#linkarea li:after{
    content:"|";
    margin: 0 10px;
}
#linkarea li:last-child:after{
    content:none;
}
#linkarea a{
    font-size:0.9em;
    margin:0 auto;
}

#copyright{
    font-size:0.8em;
    padding:8px 0;
    border-top: solid 2px #ff8c00;
}

@media(max-width:599px){

    #infoarea{
        flex-direction:column;
        width:90%;
        border-bottom:none;
    }
    #infoarea .information{
        font-size:0.9em;
        padding:50px 0;
    }
    #infoarea .image img{
        max-height: 70px;
    }
    #linkarea{
        display:none;
    }
    #copyright{
        padding:0.2em 0;
    }
}

@media(min-width:600px) and (max-width:959px){

    #infoarea{
        flex-direction:column;
    }
    #infoarea .information{
        padding:30px 0;
    }
    #infoarea .image img{
        max-height: 100px;
    }
    #copyright{
        padding:0.3em 0;
    }

}

@media(min-width:960px) and (max-width:1280px){

    #infoarea{
        flex-direction:column;
    }
    #infoarea .information{
        padding:50px 0;
    }
    #infoarea .image img{
        max-height: 120px;
    }
    #copyright{
        padding:0.3em 0;
    }

}

/* ------------------------------------------
	LINK                            
--------------------------------------------- */
.lnk a:link,
.lnk a:visited,
.lnk a:hover,
.lnk a:active,
.lnk a:focus{
	color:#6c2c2f;
	text-decoration: none;
}
.lnk a:hover,
.lnk a:active,
.lnk a:focus{
	text-decoration: underline #6c2c2f;
}
.lnk {
    font-weight:normal;
    margin:30px auto;
}
#layout{
    min-height:100%;
}

body > #layout{
    height:100%;
}