@charset "utf-8";

body{
width: 100%;
max-width: 1280px;
margin: auto;
}

.main {
margin-top: auto;
margin-left: auto;
margin-right: auto;
width: auto;
height: auto;
text-align: center;
}

.content-container {
position: relative;
background-image: url('../image/bg.jpg');
background-size: 1280px 2266px;
background-repeat: no-repeat;
background-position: center top;
width: 1280px;
height: 2266px;
display: inline-block;
}

.top-container {
position: relative;
margin-top: 50px;
width: 1280px;
height: 400px;
display: inline-block;
}

.top_title {
position: absolute;
top: 0px;
left: 58.5px;
width: 1163px;
height: 74px;
}

.top_text {
position: absolute;
top: 140px;
left: 181px;
width: 918px;
height: 243px;
}

.base-container {
position: relative;
margin-top: 50px;
width: 1280px;
height: 920px;
display: inline-block;
}

.base_line01 {
position: absolute;
top: 0px;
left: 439px;
width: 402px;
height: 62px;
}

.base_line02 {
position: absolute;
top: 790px;
left: 439px;
width: 402px;
height: 62px;
}

.list-container {
display: flex;
justify-content: center;
margin-top: 90px;
width: 1280px;
height: 663px;
}

.list_01, .list_02, .list_03 {
position: relative;
width: 415px;
height: 663px;
margin-right: 15px;
}

.list_03 {
margin-right: 0;
}

.goods_01, .goods_02 {
position: absolute;
top: 70px;
width: 190px;
height: 475px;
box-shadow: 0px 0px 3px 0 rgb(0, 0, 0, 0.4);
}

.goods_01 {
left: calc((415px - (190px * 2 + 5px)) / 2);
transition-property: opacity;
transition-duration: 0.5s;
}

.goods_01:hover {
opacity: 0.5;
}

.goods_02 {
left: calc((415px - (190px * 2 + 5px)) / 2 + 190px + 5px);
transition-property: opacity;
transition-duration: 0.5s;
}

.goods_02:hover {
opacity: 0.5;
}

.logo_01 {
position: absolute;
bottom: 35px;
left: 20px;
width: 187px;
height: 57px;
}

.chara_01 {
position: absolute;
bottom: 4px;
right: 4px;
width: 187px;
height: 142px;
}

.logo_02 {
position: absolute;
bottom: 25px;
left: 20px;
width: 189px;
height: 75px;
}

.chara_02 {
position: absolute;
bottom: 4px;
right: 15px;
width: 165px;
height: 143px;
}

.logo_03 {
position: absolute;
bottom: 10px;
left: 20px;
width: 176px;
height: 103px;
}

.chara_03 {
position: absolute;
bottom: 4px;
right: 25px;
width: 161px;
height: 146px;
}

.info-container {
position: relative;
margin-top: 0px;
width: 1280px;
height: 241px;
display: inline-block;
}

.info_bg {
position: absolute;
top: 0px;
right: 187px;
width: 906px;
height: 241px;
}

.info_text01 {
position: absolute;
top: 23px;
right: 519px;
width: 242px;
height: 41px;
}

.info_line {
position: absolute;
top: 80px;
right: 240px;
width: 800px;
height: 2px;
}

.info_text02 {
position: absolute;
top: 100px;
right: 312.5px;
width: 655px;
height: 108px;
}

.link-container {
position: relative;
margin-top: 80px;
width: 1280px;
height: auto;
display: inline-block;
}

.link_button {
position: absolute;
top: 0px;
right: 415px;
width: 450px;
height: 112px;
}

.link_button_off {
position: absolute;
top: 0px;
right: 415px;
width: 450px;
height: 112px;
filter: grayscale(100%);
}

.order_end {
position: absolute;
top: 12px;
right: 340.5px;
width: 599px;
height: 79px;
}

.info_text03 {
position: absolute;
top: 150px;
right: 214px;
width: 852px;
height: 149px;
}

.triangle_logo {
position: absolute;
top: 340px;
right: 540px;
width: 200px;
height: 101px;
}