@charset "utf-8";

.sp,
div#x_message{
display:none;
}
@media only screen and (max-width: 820px) {
.pc {
display:none;
}
.sp {
display:block;
}
.sp img {
max-width:100%;
}
}

#koteibnr p{
margin:0px;
}
#koteibnr .pc{
width: 400px;
height: 273px;
position: fixed;
bottom: 0;
right:0;
z-index:99999;
font-family: "游ゴシック体", YuGothic, "游ゴシック", "Yu Gothic", sans-serif;
line-height: 1.6;
font-size:18px;
color: #505050;
font-weight: 500;
text-align: center;
}
#koteibnr .pc .btn{
margin:0px;
position: absolute;
top:205px;
left:28px;
}
#koteibnr .pc .btn .shiny-btn1 {
width: 344px;
padding: 12px 0;
font-size: 20px;
}
@media only screen and (max-width: 820px) {
#koteibnr .sp {
max-width:100%;
position: fixed;
bottom: 0;
right:0;
z-index:99999;
}
}

body,
#test p{
margin:0px;
}
body #test{
font-family: "游ゴシック体", YuGothic, "游ゴシック", "Yu Gothic", sans-serif;
line-height: 1.6;
letter-spacing: 0em;
font-size:18px;
color: #505050;
font-weight: 500;
text-align: center;
}

#test .mB10{margin-bottom: 10px;}
#test .mB20{margin-bottom: 20px;}
#test .mB20{margin-bottom: 30px;}
#test .mB20{margin-bottom: 40px;}
#test .mB70{margin-bottom: 70px;}

#test .sect01 {
background: url(https://loop-jp.com/beaumo/images/sect01_bg.jpg) center bottom;
background-size: cover;
padding:70px 0 90px;
}
#test .sect01 img{
margin:0 auto;
}
@media only screen and (max-width: 820px) {
#test .sect01 {
padding:80px 10px 90px;
}
}

#test .sect02 {
margin:290px auto 150px;
}
#test .sect02 .sect02Ph{
position: relative;
height: 894px;
}
#test .sect02 .sect02Ph01 {
position: absolute;
background-image: url(https://loop-jp.com/beaumo/images/sect02_bg01.jpg);
background-repeat: no-repeat;
top: 241px;
left: 0;
width: 653px;
height: 653px;
}
#test .sect02 .sect02Ph02 {
position: absolute;
background-image: url(https://loop-jp.com/beaumo/images/sect02_bg02.jpg);
background-repeat: no-repeat;
top: 0;
left: 429px;
width: 223px;
height: 223px;
}
#test .sect02 .sect02Ph03{
position: absolute;
background-image: url(https://loop-jp.com/beaumo/images/sect02_bg03.jpg);
background-repeat: no-repeat;
top: 0;
left: 668px;
width: 483px;
height: 483px;
}
#test .sect02 .sect02In {
position: relative;
top: -300px;
width:500px;
margin: 0 0 0 720px;
text-align:left;
}
#test .sect02 h2{
margin: 0 0 50px;
}
#test .sect02 p.txt01{
margin-bottom: 55px;
font-size:27px;
color:#a6937c;
font-weight:bold;
}
#test .sect02 .pc {
margin-top:-200px;
}
@media only screen and (max-width: 820px) {
#test .sect02 {
margin:90px auto;
padding:400px 0 0 0;
background: url(https://loop-jp.com/beaumo/images/sect02_bg.jpg) no-repeat;
background-size:contain	;
}
#test .sect02 .sect02In {
position: static;
top: 0;
width:100%;
margin: 0 0 50px;
}
#test .sect02 .sect02In h2,
#test .sect02 .sect02In p{
margin-left: 20px;
margin-right: 20px;
}
#test .sect02 .sp{
margin: 0 20px;
}
}

#test .sect03 {
background: url(https://loop-jp.com/beaumo/images/sect03_bg.jpg) bottom;
background-size:cover;
padding:105px 0 100px;
}
@media only screen and (max-width: 820px) {
#test .sect03 {
padding:100px 10px;
}
}

#test .sect04 {
padding:100px 0 100px;
background: url(https://loop-jp.com/beaumo/images/sect04_bg.jpg) no-repeat right top;
}
#test .sect04 h2{
margin: 0 0 100px;
}
#test .sect04 .sect04In{
width: 820px;
margin: 0 auto;
text-align: left;
}
#test .sect04 h3{
width: 590px;
margin:0 0 0 -45px;
padding: 5px 10px;
display: inline-block;
background:#382612;
color: #ffffff;
font-size: 32px;
font-weight: bold;
}
#test .sect04 .sect04Cont {
margin: -20px auto 70px;
padding: 40px 30px 50px 60px;
border:2px #59493f solid;
overflow: hidden;
}
#test .sect04 .sect04Cont .img{
float: right;
}
#test .sect04 .sect04Cont h4{
font-size: 28px;
color: #362e2b;
}
#test .sect04 .sect04Cont dl dt{
margin-bottom: 5px;
font-weight: bold;
font-size: 24px;
color: #85725c;
}
#test .sect04 .sect04Cont dl dd{
margin-left:0;
}
@media only screen and (max-width: 820px) {
#test .sect04 {
padding:100px 20px 100px;
background: url(https://loop-jp.com/beaumo/images/sect04_bg.jpg) no-repeat right top #f6f6e5;
}
#test .sect04 .sect04In{
width: 100%;
text-align:center;
}
#test .sect04 h3{
width: 90%;
margin:0;
padding: 5px 10px;
font-size:28px;
text-align: left;
}
#test .sect04 .sect04Cont {
padding: 40px 20px 50px;
text-align: left;
}
#test .sect04 .sect04Cont .img{
float: none;
text-align: center;
}
}

#test .sect05 {
background: url(https://loop-jp.com/beaumo/images/sect05_bg_pc.jpg) no-repeat right top #eef7f6;
height:645px;
}
#test .sect05 .sect05In {
padding:80px 0;
}
#test .sect05 h2{
margin: 0 0 30px;
}
@media only screen and (max-width: 820px) {
#test .sect05 {
height:auto;
padding: 0 20px 200px;
background: url(https://loop-jp.com/beaumo/images/sect05_bg_sp.jpg) no-repeat right bottom;
background-size: contain;
}
}

#test .sect06 h2{
margin: 100px 0 80px;
}
#test .sect06 .sect06In {
padding: 0 0 100px;
background-image: url(https://loop-jp.com/beaumo/images/sect06_bg.jpg);
background-position: 0 85px;
background-repeat  :repeat-x;
}
#test .sect06 p.txt{
color: #ffffff;
font-size: 30px;
font-weight: bold;
}
@media only screen and (max-width: 820px) {
#test .sect06 .sect06In {
padding: 0 10px 100px;
}
#test .sect06 .sect06In .point {
margin: 0 20px;
}
#test .sect06 .sect06In p.txt{
font-size: 26px;
}
}

#test .sect07{
padding: 160px 0 100px;
background:#eeece3;
}
#test .sect07 h2{
margin: 0 0 80px;
}
#test .sect07 .sect07In{
overflow: hidden;
width: 1000px;
margin: 0 auto;
text-align: left;
}
#test .sect07 .sect07In dl{
width: 490px;
}
#test .sect07 .sect07In dl.floatL{
float: left;
}
#test .sect07 .sect07In dl.floatR{
float: right;
}
#test .sect07 .sect07In dl dt{
background: #e0dac0;
margin: 0 0 20px;
padding:0 5px;
font-size: 24px;
font-weight: bold;
color: #4c4635;
display: inline-block;
}
#test .sect07 .sect07In dl dd{
margin: 0 0 50px;
}
#test .sect07 .sect07In dl dd ul,
#test .sect07 .sect07In dl dd ul li{
list-style: none;
margin: 0;
padding: 0;
}
#test .sect07 .sect07In dl dd ul li{
position: relative;
margin-bottom:10px;
padding-left: 10px;
}
#test .sect07 .sect07In dl dd ul li:before {
content: "";
position: absolute;
top: 10px;
left: 0;
width: 5px;
height: 5px;
background-color: #505050;
border-radius: 50%;
}
@media only screen and (max-width: 820px) {
#test .sect07{
padding: 160px 20px 100px;
}
#test .sect07 .sect07In{
width:100%;
}
#test .sect07 .sect07In dl{
width:100%;
}
#test .sect07 .sect07In dl.floatL{
float: none;
}
#test .sect07 .sect07In dl.floatR{
float: none;
}
}

#test .sect08 {
background: url(https://loop-jp.com/beaumo/images/sect08_bg_pc.jpg) no-repeat right top #f8f9fb;
}
#test .sect08 .sect08In {
margin: 0 auto;
width: 1000px;
height:589px;
position: relative;
}
#test .sect08 .sect08In p {
position: absolute;
}
#test .sect08 .sect08In p.cont01 {
top: 103px;
left: 50px;
}
#test .sect08 .sect08In p.cont02 {
top: 303px;
left: 500px;
}
#test .sect08 .sect08In p.btn {
top: 431px;
left: 50px;
}
a.shiny-btn1 {
display: block;
position: relative;
width: 425px;
padding: 18px 0;
background-color: #423b34;
box-shadow: 0 3px 0 0 rgba(35, 31, 28, 1);
border-radius: 5px;
font-weight: bold;
font-size: 22px;
color: #fff !important;
text-align: center;
text-decoration: none;
overflow: hidden;
}
a.shiny-btn1:hover {
text-decoration: none;
color: #fff;
opacity:1;
}
a.shiny-btn1::before {
position: absolute;
content: '';
display: inline-block;
top: -180px;
left: 0;
width: 30px;
height: 100%;
background-color: #fff;
animation: shiny-btn1 3s ease-in-out infinite;
}
@-webkit-keyframes shiny-btn1 {
0% { -webkit-transform: scale(0) rotate(45deg); opacity: 0; }
80% { -webkit-transform: scale(0) rotate(45deg); opacity: 0.5; }
81% { -webkit-transform: scale(4) rotate(45deg); opacity: 1; }
100% { -webkit-transform: scale(50) rotate(45deg); opacity: 0; }
}


@media only screen and (max-width: 820px) {
#test .sect08 {
background: url(https://loop-jp.com/beaumo/images/sect08_bg_sp.jpg) no-repeat right bottom #f8f9fb;
background-size: contain;
padding:100px 20px 250px;
}
#test .sect08 .sect08In {
width:100%;
height:auto;
}
#test .sect08 .sect08In p {
position:static;
}
#test .sect08 .sect08In p.btn a {
margin-top:30px;
width:100%;
}
}