@charset "UTF-8";
@import url('https://fonts.googleapis.com/css2?family=Noto+Sans+JP:wght@100..900&display=swap');

ul {
display: block;
list-style-type: disc;
margin-block-end: 0;
margin-block-start: 0;
margin-inline-end: 0;
margin-inline-start: 0;
padding-inline-start: 0;
}

div.contents_area_ {
padding-top: 70px;
}

body {
margin: 0;
font-family: 'Noto Sans JP', sans-serif;
}

.contents_area_ {
padding-bottom: 0;
}
a{
transition: .6s;
display: block;
}
a:hover{
opacity: .7;
transition: .6s;
}
h2{
padding: 0;
}
/******************
Main
******************/
#Main{
width: 100%;
background-image: url(../image/main_pc.jpg);
background-size: cover;
}
#Main .MV{
width: 100%;
height: calc(100vh - 85px);
position: relative;
margin-bottom: 104px;
}
#Main .MV img{
width: 14%;
position: absolute;
top: 13%;
left: 12%;
}
#Main .mainRead{
width: 100%;
color: #fff;
padding: 160px 0;
}
#Main .mainRead h2{
font-size: 3.2rem;
margin-bottom: 40px;
}
#Main .mainRead p{
font-size: 1.6rem;
line-height: 2;
}


/******************
Main
******************/

/******************
Read
******************/
#Read{
width: 100%;
margin-bottom: 120px;
}
#Read .readBox{
display: flex;
justify-content: space-between;
}
#Read .readBox img{
width: 55%;
display: block;
}
#Read .readBox .textBox{
width: 45%;
align-items: center;
display: flex;
justify-content: center;
align-items: center;
}
#Read .readBox .readText{
width: 80%;
margin: 0 auto;
text-align: left;
}
#Read .readBox .readText h2{
font-family:'メイリオ', 'Meiryo', sans-serif;
text-align: left;
font-size: 2.4rem;
padding-bottom: 40px;
}
#Read .readBox .readText p{
font-size: 1.2rem;
text-align: justify;
}
#Read .readBox .order1{
order: 1;
}
/******************
Read
******************/

/******************
Item
******************/
#Item{
width: 80%;
max-width: 1300px;
margin: 0 auto 120px;
}
#Item .itemFlex{
width: 100%;
display: flex;
justify-content: space-between;
margin: 0 auto 80px;
}
#Item .itemFlex .itemBox{
width: 46%;
}

#Item .itemDitail{
text-align: center;
}
#Item .itemDitail h3{
margin-bottom: 24px;
font-size: 1.4rem;
}
#Item .itemDitail p{
margin-bottom: 8px;
font-size: 1.2rem;
}
#Item .itemDitail a{
display: block;
width: 160px;
border: solid 1px #000;
padding: 16px 0;
margin: 24px auto 0px;
}
#Item .itemDitail a:hover{
    background: #000;
    color: #fff;
    opacity: 1;
    }

#Item .shopList p.shop{
    margin-bottom: 24px;
    font-size: 1.2rem;
}
#Item .shopList a{
display: block;
margin-bottom: 8px;
font-size: 1rem;
text-decoration: underline;
}

/******************
Item
******************/

/***************
slide
***************/
.slide,.slide02 {
aspect-ratio: 3/3;
height: auto;
overflow: hidden;
position: relative;
width: 100%;
margin-bottom: 32px;
}

.slide img{
animation: slideIn 15s ease infinite;
display: block;
height: inherit;
opacity: 0;
position: absolute;
width: inherit;
}

.slide img:nth-of-type(1) { animation-delay: 0s }
.slide img:nth-of-type(2) { animation-delay: 3s }
.slide img:nth-of-type(3) { animation-delay: 6s }
.slide img:nth-of-type(4) { animation-delay: 9s }
.slide img:nth-of-type(5) { animation-delay: 12s }

@keyframes slideIn {
0% { opacity: 0 }
10% { opacity: 1 }
20% { opacity: 1 }
30% { opacity: 0 }
100% { opacity: 0 }
}
/***************
slide
***************/

/***************
Banner
***************/
#Banner{
width: 90%;
max-width: 1300px;
margin: 0 auto 120px;
text-align: center;
}

#Banner img{
width: 60%;
text-align: center;
}

/***************
Banner
***************/


/******************
fade
******************/
.sa {
opacity: 0;
transition: all 2s ease;
width: 100%;
}

.sa.show {
opacity: 1;
transform: none;
}

.sa--lr {
transform: translate(-100px, 0);
}

.sa--rl {
transform: translate(100px, 0);
}

.sa--up {
transform: translate(0, 100px);
}

.sa--down {
transform: translate(0, -100px);
}

.sa--scaleUp {
transform: scale(.5);
}

.sa--scaleDown {
transform: scale(1.5);
}

.sa--rotateL {
transform: rotate(180deg);
}

.sa--rotateR {
transform: rotate(-180deg);
}

/******************
fade
******************/

#Cowboy .order1 {
order: 1;
}

#Cowboy .order2 {
order: 2;
}

.pc {
display: inline-block !important;
}

.sp {
display: none !important;
}

@media only screen and (max-width: 768px) {
.pc {
display: none !important;
}

.sp {
display: block !important;
}

div.contents_area_ {
padding-top: 42px;
}

#Cowboy .container {
padding-bottom: 0;
width: calc(100% - 40px);
}

#Cowboy .inner {
width: 100%;
}

/******************
Main
******************/
#Main{
width: 100%;
background-image: url(../image/main_sp.jpg);
background-position: center;
}
#Main .MV{
width: 100%;
height: calc(100vh - 56px);
position: relative;
margin-bottom: 64px;
}
#Main .MV img{
width: 40%;
position: absolute;
top:50%;
left: 50%;
transform: translate(-50%,-50%);
}
#Main .mainRead{
width: 100%;
color: #fff;
padding: 80px 0;
}
#Main .mainRead h2{
font-size: 2rem;
margin-bottom: 24px;
}
#Main .mainRead p{
    width: 90%;
display: block;
margin: 0 auto;
font-size: .8rem;
line-height: 2;
}

/******************
Main
******************/

/******************
Read
******************/
#Read{
width: 100%;
margin-bottom: 64px;
}
#Read .readBox{
flex-wrap: wrap;
}
#Read .readBox img{
width: 100%;
}
#Read .readBox .textBox{
width: 100%;
padding: 40px 0;
}
#Read .readBox .readText{
width: 80%;
margin: 0 auto;
text-align: left;
}
#Read .readBox .readText h2{
text-align: left;
font-size: 2rem;
padding-bottom: 24px;
}
#Read .readBox .readText p{
font-size: 1rem;
text-align: justify;
}
#Read .readBox .order1{
order: 0;
}
/******************
Read
******************/

/******************
Item
******************/
#Item{
width: 100%;
margin-bottom: 64px;
}
#Item .itemFlex{
width: 80%;
flex-wrap: wrap;
margin: 0 auto 80px;
}
#Item .itemFlex .itemBox{
width: 100%;
}
#Item .itemFlex .itemBox:first-of-type{
margin-bottom: 40px;
}
#Item .itemDitail{
text-align: center;
}
#Item .itemDitail h3{
margin-bottom: 24px;
font-size: 1.2srem;
}
#Item .itemDitail p{
margin-bottom: 0px;
font-size: 1rem;
}
#Item .itemDitail a{
width: 60%;
padding: 16px 0px;
margin: 24px auto 0;
}

#Item .shopList{
    width: 90%;
    margin: 0 auto;
}
#Item .shopList p{
margin-bottom: 8px;
font-size: 1rem;
}
/******************
Item
******************/

/***************
slide
***************/
.slide,.slide02 {
margin-bottom: 24px;
}

/***************
slide
***************/

/***************
Banner
***************/
#Banner{
margin-bottom: 80px;
}

#Banner img{
width: 90%;
}

/***************
Banner
***************/



}