/* CSS Document */

@import url('https://fonts.googleapis.com/css2?family=Noto+Sans+JP:wght@300&family=Noto+Serif+JP:wght@400;700&display=swap');

body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,pre,code,form,fieldset,legend,input,textarea,select,p,blockquote,th,td{
margin:0;
padding:0;
-webkit-text-size-adjust:100%;/* iOS Safariの文字サイズ自動調整機能の無効化用 */
}

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

html{
font-family: "Noto Serif JP","Times New Roman", "YuMincho", "Hiragino Mincho ProN", "Yu Mincho", "MS PMincho", serif;
}

ul,ol{
list-style:none;
}

a:link {
text-decoration:none;
}
a:visited {
text-decoration:none;
}
a:hover {
text-decoration:none;
}
a:active {
text-decoration:none;
}

img{
height:auto;
width:auto\9; /* ie8 */
border:0;
}


body{
background-color:#9e9389;
color:#333;
font-size:16px;
line-height: 1em;
}


/*　 */

#container{
position: relative;
background: url("../img/bg.jpg") repeat-y center;
max-width: 1200px;
border-right: 1px solid #523821;
border-left: 1px solid #523821;
margin: 0 auto;
}

#tree{
width: 100%;
position: absolute;
display: flex;
justify-content: space-between;
}

header{
height: 29px;
background: rgba(41,30,21,0.5)
}
h1{
color: #fff;
font-weight: normal;
font-size: 14px;
line-height: 29px;
text-align: center;
}

#contents{
max-width: 1100px;
margin: 0 auto;
}


.prop_banner{
display: flex;
flex-wrap: wrap;
justify-content: space-between;
width: 920px;
margin: 165px auto 0;
}
.prop_nanao,.prop_joshi{
width: 420px;
height: 184px;
border-radius: 24px;
color: #fff;
text-align: center;
}
.prop_nanao{ background: #3b6649;}
.prop_joshi{ background: #574031;}
.prop_banner a{
display: block;
color: #fff;
background:  url("../img/prop_link.png") center right 24px no-repeat;
border-radius: 24px;
transition : .5s;
}
.prop_banner a:hover{
background:  url("../img/prop_link.png") center right 24px no-repeat rgba(0,0,0,0.3);
border-radius: 24px;
transition : .2s;
}


.prop_copy{
height: 70px;
line-height: 60px;
}
.prop_banner h3{
height: 74px;
}
.prop_banner p{
height: 40px;
font-size: 14px;
}
.prop_sub{
padding-top: 15px;
width: 420px;
color: #523821;
line-height: 24px;
text-align: center;
}



.insta_banner{
margin: 80px auto;
width: 438px;
height: 92px;
border-radius: 14px;
background: #fff;
}
.insta_banner a{
display: flex;
color: #333;
}
.insta_banner_logo{
margin: 12px 16px;
width: 66px;
height: 66px;
}
.insta_banner span{
display: block;
padding-top: 10px;
font-size: 16px;
line-height: 24px;
}
.insta_banner_qr{
margin: 14px 16px;
margin-left: auto;
width: 64px;
height: 64px;
}

#footer{
display: flex;
flex-wrap: wrap;
justify-content: space-between;
margin-top: 60px;
padding: 0 25px;
height: 29px;
background: rgba(41,30,21,0.5);
color: #fff;
font-size: 12px;
line-height: 29px;
}


.pc{}
.sp{display: none;}




@media screen and (max-width: 768px){

#container{
background: url("../img/bg_sp.jpg") repeat-y center;
width: 100%;
border: 0;
}

#tree img{
margin-top: 29px;
width: 40%;
height: 40%;
}

#contents{
width: 100%;
padding: 0 20px;
}

.prop_banner{
flex-flow: column;
width: 100%;
margin-top:110px;
}
.prop_nanao,.prop_joshi{
width: 100%;
height: 124px;
margin-bottom: 20px;
border-radius: 20px;
}
.prop_nanao{
margin-bottom: 40px;
}
.prop_copy{
font-size: 12px;
height: 46px;
line-height: 50px;
}
.prop_banner h3{
height: 46px;
}
.prop_nanao h3 img{ width: 162px;}
.prop_joshi h3 img{ width: 137px;}
.prop_banner p{
height: 32px;
font-size: 12px;
}
.prop_sub{
padding-top:3px;
width: 100%;
font-size: 14px;
line-height: 20px;
}

.insta_banner{
width: 100%;
height: 70px;
}
.insta_banner a{
}
.insta_banner_logo{
margin: 10px 8px 10px 10px;
width: 50px;
height: 50px;
}
.insta_banner span{
padding-top: 7px;
padding-right: 6px;
font-size: 13px;
line-height: 18px;
}
.insta_banner_qr{
display: none;
}

#footer{
flex-wrap: nowrap;
flex-direction:column;
margin-top: 60px;
padding: 10px 0;
height: 68px;
line-height: 24px;
text-align: center;
}


.pc{display: none;}
.sp{display: inline;}


}