@charset "utf-8";
/* CSS Document */

html{height: 100%; font-size: 100%;}

body{
height: 100%;
background: #edb4af;
color: #555;
font-size: 100%;	
font-family: 'ヒラギノ角ゴシック Pro', 'Hiragino Kaku Gothic Pro', メイリオ, Meiryo, sans-serif;
margin: 0;
}

a {
color: #555;
text-decoration: none;
}

@media screen and (min-width: 600px){
.text_pc {display:block;}
.text_sp {display:none;}
}

@media screen and (max-width: 600px){
.text_pc {display:none;}
.text_sp {display:block;}
}

p {
font-size: 110%;
line-height: 1.6;
padding: 0;
margin: 0;
}

@media screen and ( max-width:500px ){
p {
font-size: calc(74% + 0.25vw);
line-height: 1.6;
}
}

img {
max-width: 100%;
height: auto;
border: 0;
margin: 0;
}

hr.line01 {
border: none;
background: repeat-x top url("https://www.hiorie.work/honten/images/event01/21spring_pattern02.png");
max-width: 900px;
height: 86px;
margin: 0 auto;
}

@media screen and (max-width: 600px) {
hr.line01 {
background-size: auto 79%;
}
}

hr.dotline {
border: none;
border-top: 1px dotted #2b3a57;
max-width: 880px;
margin: 7% auto;
}

div#logo {
text-align: center;
padding: 0.75%;
line-height: 1;
}

#logo img {
max-width: 30%;
}

div#wrap {
width: 100%;
margin: 0;
padding: 0 0 5%;
background: #fff;
}

header {padding: 0; margin: 0;}

div#title {
background: url("https://www.hiorie.work/honten/images/event01/22spring_ttl00_bg.jpg") center;
background-size: auto 100%;
width: 100%;
height: auto;
padding: 90px 0;
animation: fadeIn 2s ease 0s 1 normal;
-webkit-animation: fadeIn 2s ease 0s 1 normal;
}

@keyframes fadeIn {
0% {opacity: 0}
100% {opacity: 1}
}
@-webkit-keyframes fadeIn {
0% {opacity: 0}
100% {opacity: 1}
}

@media screen and (max-width: 600px) {
div#title {
background: url("https://www.hiorie.work/honten/images/event01/22spring_ttl00_bgsp.jpg") center;
background-size:100% auto;
padding: 60px 0;
}
}

#title h1{
width: 95%;
max-width: 900px;
margin: auto;
}

div#intro {
width: 100%;
text-align: center;
margin: 0 auto;
padding: 6% 0;
}

div#intro p {
font-size: 1.2em;
line-height: 1.8;
}

@media screen and ( max-width:600px ){
div#intro p {
font-size: 0.9em;
text-align: left;
padding: 0 2%;
}
}

.container_ttl {
line-height: 2.2;
margin: 0 0 3%;
position: relative;
}

.container_ttl img.pick {
max-width: 70%;
}
.container_ttl img.ttl {
max-width: 95%;
}

.item_name {
font-size: 1.7em;
font-weight: bold;
line-height: 1.4;
padding: 0;
margin: 7% 0 6%;
}

.item_name-sub {
font-size: 70%;
}

.item_name_3c {
font-size: 1.1em;
font-weight: bold;
line-height: 1.5;
margin: 12px 0 5px;
}

@media screen and ( max-width:600px ){
.item_name {
font-size: 1.3em;
margin: 7% 0 6% 2%;
}
.item_name_3c {
font-size: 0.8em;
}
}

@media screen and ( max-width:420px ){
.item_name {
font-size: 1em;
}
.item_name_3c {
font-size: 0.7em;
}
}

@media screen and ( max-width:350px ){
.item_name {
font-size: 0.8em;
}
.item_name_3c {
font-size: 0.6em;
}
}

main {
width:900px;
padding: 0;
margin: 1% auto;
}

@media screen and (max-width: 900px) {
main {
width: 100%;
}
}

div.container {
text-align: center;
margin: 9% auto 12%;
}

/* スクロールアニメーション */
.fade {
opacity: 0;
transition: all .8s ease;
}

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

div.item {
width: 100%;
max-width: 880px;
}

div.recommend {
margin: 5% 0 8%;
}

div.text_box {
margin: 4% 0 5%;
}

@media screen and (min-width: 600px) {
div.text_box_sp {
display: none;
}
}

@media screen and (max-width: 600px) {
div.text_box_sp {
width: auto;
background: #fff;
text-align: left;
padding: 0px 2%;
margin: 3% 0.5% 5%;
}
}

div.item_2column {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-ms-flex-wrap: nowrap;
flex-wrap: nowrap;
-webkit-box-pack: justify;
-ms-flex-pack: justify;
justify-content:space-between;
width: 100%;
max-width: 880px;
margin: 5% auto;
}

div.item_3column {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-ms-flex-wrap: nowrap;
flex-wrap: nowrap;
-webkit-box-pack: justify;
-ms-flex-pack: justify;
justify-content: space-between;
-webkit-box-align: start;
-ms-flex-align: start;
align-items: flex-start;
max-width: 880px;
margin: 5% auto 9%;
}

.item_1c {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-ms-flex-wrap: wrap;
flex-wrap: wrap;
width: 100%;
max-width: 400px;
height: 100%;
}

.item_2c {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-ms-flex-wrap: nowrap;
flex-wrap: nowrap;
-webkit-box-pack: justify;
-ms-flex-pack: justify;
justify-content: space-between;
-ms-flex-line-pack: center;
align-items: center;
width: 100%;
margin: 0 auto 4%;
}

div.item3c {
width: 33%;
max-width: 250px;
}

div.photo_880 {
margin: 4% auto;
}

@media screen and (min-width: 600px) {
.item div.item_detail {
width: 100%;
max-width: 420px;
}
.item3c p {
font-size: 90%;
}
div.photo_880 {
width: 100%;
max-width: 880px;
max-height: 480px;
}
div.photo_420 {
width: 100%;
max-width: 420px;
max-height: 420px;
}
div.photo_400 {
width: 100%;
max-width: 400px;
max-height: 400px;
margin: 3% 0;
}
div.photo_260 {
width: 100%;
max-width: 260px;
max-height: 260px;
}
}

@media screen and (max-width: 600px) {
div.item_2column {
-ms-flex-wrap: wrap;
flex-wrap: wrap;
}
.item_1c {
-ms-flex-wrap: nowrap;
flex-wrap: nowrap;
-webkit-box-pack: justify;
-ms-flex-pack: justify;
justify-content: space-between;
-ms-flex-line-pack: center;
align-items: center;
margin: 2% 0 0;
}
.item_2c {
-ms-flex-wrap: wrap;
flex-wrap: wrap;
}
.item3c p {
width: 94%;
min-height: 3em;
padding: 1%;
margin: 0 auto;
}
div.item_detail {
width: 49%;
}
div.photo_420,div.photo_400 {
width: 49%;
padding: 0;
margin: 2px;
}
div.photo_260 {
width: 95%;
margin: auto;
}
}

div.photo {
overflow: hidden;
position: relative;
line-height: 0;
}

.photo_caption a {
font-size: 1.3em;
text-align: center;
padding-top: 46%;
width: 100%;
height: 100%;
display: block;
position: absolute;
top: 0;
left: 3px;
color: #ffffff;
text-decoration: none;
}

@media screen and (max-width: 600px) {
.photo_caption a {
font-size: 0.8em;
}
}

/* サムネイルマウスオーバー時 */
div.photo_mask {
width: 100%;
height: 100%;
position: absolute;
top: 0;
left: 0;
opacity: 0;
background-color: rgba(194,212,204,0.55);
-webkit-transition: all 0.2s ease;
transition: all 0.2s ease;
}

div.photo:hover .photo_mask {
opacity: 1;
}

div.item_caption {
width: 95%;
height: 100%;
text-align: left;
margin-left: 3%;
}

div.item_tag {
font-size: 1.1em;
margin: 3% 0 4%;
}

div.item_tag span {
color: #ffffff;
padding: 3px 8px;
margin-top: 3px;
margin-right: 2px;
border-radius: 25px;
background-color: #b2b2b2;
display: inline-block;
}

div.item_size {
font-size: 0.95em;
margin: 0 0 0.9em 0;
}

div.item_size span {
color: #999999;
padding: 0.1em 0.3em;
margin-top: 3px;
margin-right: 2px;
border: solid 1px #999999;
display: inline-block;
}

div.item_size span.hot {
background: #fffde9;
}

p.item_color {
margin: 4% 0;
}

@media screen and (max-width: 600px) {
div.item_tag {
font-size: 0.715em;
}
div.item_size {
font-size: 0.675em;
}
p.item_color img {
width: 88%;
}
}

p.atte {
font-size: 0.95em;
margin: 2% 1% 0;
text-align: left;
}

p.button_more {
margin-bottom: 2%;
}

.button_more a {
display: block;
border: 2px solid;
padding: 3% 0;
width: 90%;
max-width: 500px;
text-align: center;
position: relative;
font-size: 1.1em;
margin: 0 auto;
}
.button_more a:after {
content: "";
display: block;
width: 9px;
height: 9px;
border-top: 1px solid;
border-right: 1px solid;
-webkit-transform: rotate(45deg);
-ms-transform: rotate(45deg);
transform: rotate(45deg);
position: absolute;
right: 12px;
top: 0;
bottom: 0;
margin: auto;
}
.button_more a:hover {
background-color: #d1e1da;
transition: 0.2s;
}

div.baloon {
position: relative;
display: inline-block;
margin: 1% auto;
padding: 1.5% 1%;
width: 96%;
max-width: 650px;
color: #fff;
font-size: 16px;
background: #edb4af;
border: none;
border-radius: 6px;
}
div.baloon:before {
content: "";
position: absolute;
top: 100%;
left: 50%;
margin-left: -14px;
border: 14px solid transparent;
border-top: 14px solid #edb4af;
}
div.baloon p {
font-size: 1.5em;
margin: 3% 0;
}
@media screen and (max-width: 600px){
div.baloon p {
font-size: 1em;
}
}

footer {
text-align: center;
margin: 0;
padding-bottom: 5%;
color: #fff;
}

div#navi {
width: 100%;
text-align: center;
margin: 0;
line-height: 1.6;
padding: 3em 0 1.5em;
}

#navi a{
text-decoration: none;
color: #fff;
}

p#copy {
font-size: 0.8em;
}