@charset "UTF-8";
@media screen and (min-width: 768px),print {

#con01{ margin-bottom: 140px; }
#con01 .ttl{ width: 950px; margin: 0 auto 50px; }
#con01 .inner-Box{ padding-top: 300px; padding-bottom: 125px; background: url(../images/play/con01-bg01.jpg) no-repeat center top,url(../images/play/con01-bg02.jpg) no-repeat center bottom,#A27F2B;  }
#con01 .box1{ width: 1000px; margin: 0 auto 20px; background-color: #fff; padding: 80px 0 74px; position: relative; }
#con01 .box1 .txt{ font-size: 20px; font-weight: 600; text-align: center; letter-spacing: 1px; margin-bottom: 20px; }
#con01 .box1 .ttl1{ font-size: 28px; font-weight: 900; text-align: center; letter-spacing: 1px; line-height: 50px; color: #A27F2B; margin-bottom: 52px; }
#con01 .box1 .txt1{ text-align: center; letter-spacing: 1px; line-height: 30px; margin-bottom: 30px;}
#con01 .box1 .icon1{ position: absolute; top: 20px; left: 20px; }
#con01 .box1 .icon2{ position: absolute; bottom: 0px; right: 40px; }
#con01 .icon3{ width: 78px; margin: 0 auto 151px; }
#con01 .box2{ position: relative; width: 1100px; margin: 0 auto; }
#con01 .box2 .icon4{ position: absolute; top: -88px; left: -75px; }
#con01 .box2 .ttl2{ font-size: 28px; font-weight: bold; line-height: 51px; letter-spacing: 1.5px; color: #fff; margin-bottom: 45px; }
#con01 .box2 .pic{ position: absolute; top: -20px; right: -80px; }
#con01 .box2 .inbox1{ width: 740px; padding: 39px 28px 39px 49px; position: relative; margin-bottom: 28px; border-radius: 30px; background-color: #fff; }
#con01 .box2 .inbox1::after{content: ''; display: inline-block; width: 70px; height: 68px; background-image: url(../images/play/con01-icon05.svg); background-repeat: no-repeat; position: absolute; top: 75px; right: -30px; }
#con01 .box2 .inbox1 .txt2{ font-size: 16px; line-height: 30px; margin-bottom: 20px;}
#con01 .box2 .inbox2{ width: 1100px; padding: 51px 20px 61px 20px; position: relative; margin-bottom: 50px; border-radius: 30px; background-color: #fff; }
#con01 .box2 .inbox2::after{content: ''; display: inline-block; width: 68px; height: 70px; background-image: url(../images/play/con01-icon06.svg); background-repeat: no-repeat; position: absolute; top: -30px; right: 60px; }
#con01 .box2 .inbox2 .txt3{ font-size: 18px; line-height: 30px; text-align: center; font-weight: bold; line-height: 43px; }
#con01 .box2 .inbox2 .txt3 span{ font-size: 23px; background:linear-gradient(transparent 70%, #FECC01 0%); }
#con01 .box2 .txt4 { font-size: 16px; line-height: 30px; color: #fff; text-align: center; }

#con02{ background: url(../images/play/con02-bg01.png) no-repeat center top; margin-bottom: 102px; }
#con02 .txt{ font-size: 20px; font-weight: 600; letter-spacing: 2px; margin-bottom: 25px; padding-top: 20px; text-align: center; }
#con02 .ttl{ font-size: 38px; font-weight: bold; text-align: center; letter-spacing: 2px; line-height: 57px; margin-bottom: 10px; }
#con02 .pic{ width: 560px; margin: 0 auto 30px; }
#con02 .txt1{ font-size: 16px; line-height: 30px; margin-bottom: 40px; text-align: center; }
#con02 .list{ width: 1280px; margin: 0 auto 50px; display: -webkit-box; display: -webkit-flex; display: -moz-flex; display: -ms-flex; display: -o-flex; display: flex; -webkit-box-lines: multiple; -moz-box-lines: multiple; -webkit-flex-wrap: wrap; -moz-flex-wrap: wrap; -ms-flex-wrap: wrap; flex-wrap: wrap; }
#con02 .list li{ width: 410px; margin-right: 3px; }
#con02 .list li p{ width: 340px; margin: 0 auto; }
#con02 .box1{ width: 1100px; margin: 0 auto; padding: 90px 0 100px 108px; position: relative; background: url(../images/play/con02-bg02.jpg) no-repeat center top;  }
#con02 .box1 .icon{ position: absolute; top: -30px; left: 10px; }
#con02 .box1 .ttl1{ font-size: 23px; font-weight: bold; line-height: 43px; letter-spacing: 1.5px; margin-bottom: 30px; }
#con02 .box1 .txt2{ font-size: 16px; line-height: 30px; }
#con02 .box1 .pic{ position: absolute; top: 53px; right: -20px; }
#con02 .box1 .pic1{ position: absolute; bottom: 6px; right: 25px; }
#con02 .box2{ background: url(../images/play/con02-bg03.jpg) no-repeat center bottom; min-height: 377px; padding-top: 160px; margin-top: -100px; }
#con02 .box2 .list{width: 1200px; margin: 0 auto; display: -webkit-box; display: -webkit-flex; display: -moz-flex; display: -ms-flex; display: -o-flex; display: flex;-webkit-box-lines: multiple; -moz-box-lines: multiple; -webkit-flex-wrap: wrap; -moz-flex-wrap: wrap; -ms-flex-wrap: wrap; flex-wrap: wrap; justify-content: center;}
#con02 .box2 .list li{width: 270px; text-align: center; color: #fff; padding: 15px;}
#con02 .box2 .list li:first-child{width: 220px; padding: 30px 15px 30px 0px}
#con02 .box2 .list li:nth-child(2){padding: 15px 20px 15px 8px; margin-right: -30px}
#con02 .box2 .list li:nth-child(2) img{width: 100%}
#con02 .box2 .list li:nth-child(3){padding: 15px 20px 15px 8px}
#con02 .box2 .list li:nth-child(3) img{width: 100%}
#con02 .box2 .list li:nth-child(4){padding: 15px 20px 15px 8px}
#con02 .box2 .list li:nth-child(4) img{width: 100%}
#con02 .box2 .list li .ttl{font-size: 24px; font-weight: bold; margin-bottom: 14px; line-height: 1.5; letter-spacing: 1px;}
#con02 .box2 .list li .txt{ width: 205px; padding-top: 0; font-size: 12px; font-weight: 600; line-height: 1.4; letter-spacing: 1.3px;}

#con03{ margin-bottom: 80px; }
#con03 .box1{ width: 1020px; margin: 0 auto; padding-top: 58px; position: relative; }
#con03 .box1 .icon{ width: 163px; margin: 0 auto 20px; }
#con03 .box1 .ttl1{ font-size: 25px; font-weight: bold;text-align: center; margin-bottom: 20px; letter-spacing: 2px; }
#con03 .box1 .ttl1 span{ color: #A27F2B; }
#con03 .box1 .txt2{ text-align: center; margin-bottom: 30px; }
#con03 .box1 .pic{ position: absolute; top: 130px; right: 20px; }
#con03 .box1 .bnr{ width: 1020px; margin: 0 auto; }

.bnr-area{ width: 960px; margin: 0 auto; }
.bnr-area .box1 .list{ background-color: #F3F3F3; padding: 55px 50px; margin-bottom: 60px; display: flex; justify-content: space-between; }
.bnr-area .box2 .list{ width: 820px; margin: 0 auto; display: flex; justify-content: space-between; }

}


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

#con01{ margin-bottom: 14vw; }
#con01 .ttl{ margin: 0 auto 6vw; padding: 0 5%; }
#con01 .inner-Box{ padding-top: 30vw; padding-bottom: 12vw; background: url(../images/play/sp-con01-bg01.jpg) no-repeat center top,url(../images/play/con01-bg02.jpg) no-repeat center bottom,#A27F2B; background-size: 100%,100%,100%;  }
#con01 .box1{ margin: 0 5vw 2vw; background-color: #fff; padding: 12vw 3vw 15vw; position: relative; }
#con01 .box1 .txt{ font-size: 4vw; font-weight: 600; text-align: center; letter-spacing: 1px; margin-bottom: 3vw; }
#con01 .box1 .ttl1{ font-size: 4.7vw; font-weight: 900; text-align: center; letter-spacing: 1px; line-height: 1.5; color: #A27F2B; margin-bottom: 5vw; }
#con01 .box1 .txt1{ text-align: center; letter-spacing: 1px; line-height: 1.5; font-size: 3.6vw; margin-bottom: 3vw}
#con01 .box1 .icon1{ position: absolute; top: 2vw; left: 2vw; width: 20%; }
#con01 .box1 .icon2{ position: absolute; bottom: 0px; right: 4vw; width: 28%; }
#con01 .icon3{ margin: 0 44vw 15vw; }
#con01 .box2{ position: relative; padding: 0 5%; }
#con01 .box2 .icon4{ position: absolute; top: -16vw; left: 0vw; width: 25%; }
#con01 .box2 .ttl2{ font-size: 4.7vw; font-weight: bold; line-height: 1.5; letter-spacing: 1.5px; color: #fff; margin-bottom: 5vw; }
#con01 .box2 .pic{ width: 90%; margin: 0 auto 3vw; }
#con01 .box2 .inbox1{ padding: 5vw; position: relative; margin-bottom: 8vw; border-radius: 5vw; background-color: #fff; }
#con01 .box2 .inbox1::after{content: ''; display: inline-block; width: 16vw; height: 11vw; background-image: url(../images/play/con01-icon06.svg); background-repeat: no-repeat; position: absolute; top: -7vw; left: 6vw; }
#con01 .box2 .inbox1 .txt2{ font-size: 3.6vw; line-height: 1.5; margin-bottom: 3vw}
#con01 .box2 .inbox2{ padding: 5vw; position: relative; margin-bottom: 8vw; border-radius: 5vw; background-color: #fff; }
#con01 .box2 .inbox2::after{content: ''; display: inline-block; width: 16vw; height: 11vw; background-image: url(../images/play/con01-icon06.svg); background-repeat: no-repeat; position: absolute; top: -7vw; left: 6vw; }
#con01 .box2 .inbox2 .txt3{ font-size: 3.8vw; line-height: 1.5; text-align: center; font-weight: bold; line-height: 1.5; }
#con01 .box2 .inbox2 .txt3 span{ font-size: 4.3vw; background:linear-gradient(transparent 70%, #FECC01 0%); }
#con01 .box2 .txt4 { font-size: 3.4vw; line-height: 1.5; color: #fff; text-align: center; }

#con02{ background: url(../images/play/con02-bg01.png) no-repeat center 3vw; background-size: 100%; margin-bottom: 10vw; }
#con02 .txt{ font-size: 3.8vw; font-weight: 600; letter-spacing: 0.3vw; margin-bottom: 3vw; padding-top: 3vw; text-align: center; }
#con02 .ttl{ font-size: 4.2vw; font-weight: bold; text-align: center; letter-spacing: 2px; line-height: 1.5; margin-bottom: 3vw; }
#con02 .pic{ width: 60%; margin: 0 auto 3vw; }
#con02 .txt1{ font-size: 3.6vw; line-height: 1.5; margin-bottom: 4vw; padding: 0 5%; }
#con02 .list{width: 90vw; margin: 0 auto 18vw; display: -webkit-box; display: -webkit-flex; display: -moz-flex; display: -ms-flex; display: -o-flex; display: flex; -webkit-box-lines: multiple; -moz-box-lines: multiple; -webkit-flex-wrap: wrap; -moz-flex-wrap: wrap; -ms-flex-wrap: wrap; flex-wrap: wrap; }
#con02 .list li{ margin-bottom: 5vw; text-align: center;}
#con02 .list li:nth-child(1){ width: 87vw}
#con02 .list li:nth-child(2){ margin-bottom: 5vw; text-align: center; position: relative; left: -3vw}
#con02 .list li:nth-child(3){ margin-bottom: 5vw; text-align: center; position: relative; left: -3vw}
#con02 .list li img{ margin: 0 auto 3vw; text-align: center;}
#con02 .list li p{ font-size: 3.6vw; padding-left: 3vw; }
#con02 .box1{ padding: 5vw; position: relative; background: url(../images/play/con02-bg02.jpg) no-repeat center top;  }
#con02 .box1 .icon{ position: absolute; top: -13vw; left: 1vw; width: 28%; }
#con02 .box1 .ttl1{ font-size: 4.2vw; font-weight: bold; line-height: 1.5; letter-spacing: 1.5px; margin-bottom: 3vw; }
#con02 .box1 .txt2{ font-size: 3.6vw; line-height: 1.5; margin-bottom: 5vw; }
#con02 .box1 .pic{ width: 100vw; margin: 0 auto;}
#con02 .box1 .pic1{ display: none; }
#con02 .box2{background: url(../images/play/con02-bg03.jpg) repeat; padding: 10vw 0 8vw;}
#con02 .box2 .list{width: 100vw; margin: 0 auto; display: -webkit-box; display: -webkit-flex; display: -moz-flex; display: -ms-flex; display: -o-flex; display: flex;-webkit-box-lines: multiple; -moz-box-lines: multiple; -webkit-flex-wrap: wrap; -moz-flex-wrap: wrap; -ms-flex-wrap: wrap; flex-wrap: wrap; justify-content: center;}
#con02 .box2 .list li{width: 85vw; margin: 0 auto 5vw; text-align: center; color: #fff; }
#con02 .box2 .list li:last-child{width: 80vw; margin: 0 auto 5vw; text-align: center; color: #fff; }
#con02 .box2 .list li .ttl{font-size: 6vw; font-weight: bold; margin-bottom: 3vw; line-height: 1.5; letter-spacing: 0.3vw;}
#con02 .box2 .list li .txt{font-size: 3.4vw; font-weight: 600; line-height: 1.4; letter-spacing: 0.3vw; margin-bottom: 3vw}

#con03{ margin-bottom: 8vw; }
#con03 .box1{ background-color: #fff; padding-top: 5vw; position: relative; }
#con03 .box1 .icon{ width: 30%; margin: 0 auto 4vw; }
#con03 .box1 .ttl1{ font-size: 4.3vw; font-weight: bold;text-align: center; margin-bottom: 3vw; }
#con03 .box1 .ttl1 span{ color: #A27F2B; }
#con03 .box1 .txt2{ text-align: center; margin-bottom: 4vw; font-size: 3.6vw; }
#con03 .box1 .pic{ position: absolute; top: 22.5vw; right: 0.5vw; width: 23%; }
#con03 .box1 .bnr{  }

.bnr-area{ padding: 0 5%; }
.bnr-area .box1 .list{ background-color: #F3F3F3; padding: 5vw; margin-bottom: 6vw;  }
.bnr-area .box1 .list li{ margin-bottom: 6vw;  }
.bnr-area .box2 .list li{ margin-bottom: 6vw; }


}