@charset "UTF-8";

/* INDEX
-------------------------------------------
1. main layout
2. navigation
3. link style
4. common parts
-------------------------------------------*/


/* 1. main layout
-------------------------------------------*/
body{
    font-family: 'Noto Sans JP', sans-serif;
color:#333333;
font-size:80%;
background-image: url(../pub/bg2.jpg);
background-repeat: repeat-x;
background-color:#ffffff;
line-height:1.3;
}

#wrapper{
margin:0 auto;
padding:0px 10px;
width:100%;
border-left:0px solid #cccccc;
border-right:0px solid #cccccc;
border-bottom:1px solid #cccccc;
background-color:#FFFFFF;
text-align:left;
position: fixed;
z-index: 2;
}

@media print{
#wrapper{
position: absolute;
}
}

#header{
margin:0px auto;
padding:15px 0px 0px 0px;
width:100%;
max-width:1080px;
height:85px;
position:relative;
z-index:2;
}

#pankuzu{
}

#head{
padding:90px 0px 0px;
}

#contents{
margin:0;
padding:20px 0px 5px 0px;
width:100%;
position:relative;
z-index:1;
}

#maincol{
margin:0px auto;
padding:0px;
width:100%;
max-width:1080px;
}

#maincol .top{
border-top:1px #FFFFFF solid;
border-bottom:1px #FFFFFF solid;
position:relative;
}

#brand-list{
  width:100%;
  display: -webkit-flex; /* Safari */
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  margin:20px 0;
}

#brand-list li{
  width:calc((100% - 20px) / 4);
  border: 1px solid #999;
  position: relative;
  display: table-cell;
}

#brand-list li:first-child{
  width:100%;
}

#brand-list li img{
  width:100%;
}

#original{
  width:100%;
  display: -webkit-flex; /* Safari */
  display: flex;
  -webkit-flex-wrap: nowrap; /* Safari */
  flex-wrap:         nowrap;
  margin:20px 0;
}

#original_item{
  width:calc(100% / 5 * 3);
  display: -webkit-flex; /* Safari */
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  margin-right:3%;
}

#original_item li{
  width:calc((100% - 16px) / 3);
  border:1px solid #999;
  display:table-cell;
}

#original_item li img{
  width:100%;
}

#original_title{
  width:calc(100% / 5 * 2);
  display: -webkit-flex; /* Safari */
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
}

#original_title li{
  width:calc((100% - 6px) / 2);
  border:1px solid #999;
  display:table-cell;
}

#original_title li img{
  width:100%;
}

#collabo{
  width:100%;
  display: -webkit-flex; /* Safari */
  display: flex;
  -webkit-flex-wrap: nowrap; /* Safari */
  flex-wrap:         nowrap;
  margin:20px 0;
}

#collabo_item{
  width:calc(100% / 6 * 3);
  display: -webkit-flex; /* Safari */
  display: flex;
  flex-wrap: wrap;
  margin-right:3%;
}

#collabo_item li{
  width:calc((100% - 12px) / 3);
  border:1px solid #999;
  display:table-cell;
  margin-right: 5px;
}

#collabo_item li:last-child {
  margin-right: 0;
}

#collabo_item li img{
  width:100%;
}

#shop_info{
  width:calc(100% / 6 * 3);
  display: -webkit-flex; /* Safari */
  display: flex;
  flex-wrap: wrap;
}

#shop_info li{
  width:calc((100% - 12px) / 3);
  border:1px solid #999;
  display:table-cell;
  margin-right: 5px;
}

#shop_info li:last-child {
  margin-right: 0;
}

#shop_info li img{
  width:100%;
}

#list_event_campaign{
  width:100%;
  display: -webkit-flex; /* Safari */
  display: flex;
  -webkit-flex-wrap: nowrap; /* Safari */
  flex-wrap:         nowrap;
  margin:20px 0;
}

#inner_event {
  width:calc(100% / 6 * 3);
  margin-right:3%;
}


#list_event{
  width:100%;
  display: -webkit-flex; /* Safari */
  display: flex;
  flex-wrap: wrap;
  margin-right:3%;
}

#list_event li{
  width:calc((100% - 12px) / 3);
  border:1px solid #999;
  display:table-cell;
  margin-right: 5px;
}

#list_event li:last-child {
  margin-right: 0;
}

.seemore{
  border:none;
  width:100%;
  text-align:center;
  background:#666;
  margin:0.5em 0 0.5em 0;
}

.seemore a{
  padding:0.5em;
  display:block;
  color:#fff !important;
}

#list_event li img{
  width:100%;
}

#inner_campaign {
  width:calc(100% / 6 * 3);
}

#list_campaign{
  width:100%;
  display: -webkit-flex; /* Safari */
  display: flex;
  flex-wrap: wrap;
}

#list_campaign li{
  width:calc((100% - 12px) / 3);
  border:1px solid #999;
  display:table-cell;
  margin-right: 5px;
}

#list_campaign li:last-child{
  margin-right: 0;
}

#list_campaign li img{
  width:100%;
}



#list_search_title{
  width:100%;
  display: block;
  margin:20px 0;
}

#list_title{
  width:100%;
  display: -webkit-flex; /* Safari */
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  margin-right:0px;
}

#list_title li{
  margin-bottom:8px;
  width:calc((100% - 35px) / 6);
  border:1px solid #999;
  text-align:center;
  padding:0.5em;
}

#list_title li a{
  display:block;
  height:40px;
}

#list_title li img{
  width:100%;
  height:80px;
}




#list_oshirase_media{
  width:100%;
  display: -webkit-flex; /* Safari */
  display: flex;
  -webkit-flex-wrap: nowrap; /* Safari */
  flex-wrap:         nowrap;
  margin:20px 0;
}

#list_oshirase{
  width:calc(100% / 2);
  margin-right:3%;
}

#list_oshirase li{
  width:100%;
  text-align:left;
  padding:0.5em 1.5em;
}

#list_media{
  width:calc(100% / 2);
}

#list_media li{
  width:100%;
  text-align:left;
  padding:0.5em 1.5em;
}




#officialsns_mailmaga{
  width:100%;
  display: -webkit-flex; /* Safari */
  display: flex;
  -webkit-flex-wrap: nowrap; /* Safari */
  flex-wrap:         nowrap;
  margin:20px 0 0 0;
}

#officialsns{
  width:calc(100% / 4 * 3);
  display: -webkit-flex; /* Safari */
  display: flex;
  flex-wrap: wrap;
  margin-right:3%;
}

#officialsns li{
  width:calc((100% - 15px) / 3);
  text-align:left;
  padding:0.5em;
  font-size:90%;
}

#open-tw{height: 130px;overflow: hidden;transition: height 1s; -webkit-transition: height 1s;}
#open-tw:hover{height: 250px;}

#officialsns li img.officialsns{
  width:30%;
  float:left;
  margin-right:1em;
  margin-bottom:0.5em;
}

.twitter_select   {
    border-radius: 0.5em;
    -webkit-border-radius: 0.5em;
    -moz-border-radius: 0.5em;
    width:100%;
    border:1px #ccc solid;
    background:#fff;
    padding:0.6em 0.6em 0;
    margin-top:0.6em;
    z-index:100;
}

.twitter_select p a {
display:block;
}

.twitter_select p img {
  width:20%;
  margin-right:0.6em;
  margin-bottom:0.6em;
  vertical-align: middle;
}

#mailmaga{
  width:calc(100% / 4 * 1);
  display: -webkit-flex; /* Safari */
  display: flex;
  flex-wrap: wrap;
}

#mailmaga li{
  width:calc((100% - 0px) / 1);
  text-align:left;
  padding:0.5em;
  font-size:90%;
  height: 100%;
}

#mailmaga li img{
  width:30%;
  float:left;
  margin-right:1em;
}



#topLeft,#topCenter,#topRight {
float: left;
}

.hline0 {
clear: both;
}

.hline1 {
clear: both;
padding-top:15px;
}

#topLeft {
width: 202px;
margin:0 0px 10px 0px;
padding:0px 9px 5px 5px;
}

#topCenter {
width: 300px;
margin:0 0px 10px 0px;
border-left:1px #ccc solid;
border-right:1px #ccc solid;
padding:0px 9px 5px 9px;
}

#topRight {
width: 300px;
margin:0 0px 10px 0px;
padding:0px 5px 5px 9px;
overflow:hidden;
}

#topLeft ul li{
float: left;
padding:5px 0;
border-bottom:1px #666666 dotted;
width:202px;
font-size:90%;
}

#topCenter ul li,#topRight ul li{
float: left;
padding:5px 0;
border-bottom:1px #666666 dotted;
width:300px;
font-size:90%;
}

#topLeft img.newsimg,#topCenter img.newsimg,#topRight img.newsimg{
float: left;
margin-right:5px;
border:1px #666666 solid;
width:60px;
height:39px;
}

#topLeft img.specialimg{
float: left;
border:1px #666666 solid;
}

#topLeft ul li p,#topLeft ul li em,
#topCenter ul li p,#topCenter ul li em,
#topRight ul li p,#topRight ul li em{
font-size:85%;
}

#footer {
width:100%;
clear: both;
background:#f1f1f1;
    margin-top: 2em;
}

a.anchor{
position: relative;
top: -100px;
}

@media screen and (max-width: 1000px){
a.anchor{
top: -170px;
}
}
/* 2. navigation
-------------------------------------------*/


/* 3. link style
-------------------------------------------*/
a{
overflow:hidden;
}

a:link{
color:#069;
text-decoration:none;
}

a:visited{
color:#069;
text-decoration:none;
}

a:hover{
color:#FF6600;
text-decoration:underline;
}

a:active{
color:#FF6600;
text-decoration:underline;
}

/* 4. common parts
-------------------------------------------*/
/* 4.1 of header
-------------------------------------------*/
.wrap_head{
background-color:#000066;
}

#logo{
padding:23px 30px 7px 5px;
float:left;
}

#ham-menu{
float:right;
}

#ham-menu ul li{
margin:17px 0px 5px 0px;
border-left:solid 1px #666666;
float:left;
}

#ham-menu ul li a{
padding:10px 20px 10px 20px;
font-size:90%;
color:#333;
display:block;
}

/* 4.2 of content
-------------------------------------------*/

.red{
color:#CC0000;
}

.bline{
border-bottom:dotted 1px #6699FF;
padding-bottom:5px;
margin-bottom:10px;
}

.rline{
border-right:dotted 1px #6699FF;
}

/* 4.3 of footer
-------------------------------------------*/
.go_top{
padding:5px 0px 0px;
text-align:center;
}

.txt_copy{
padding:10px 20px 5px 0px;
text-align:center;
}

#contents #fade {
	position:relative;
	width: 850px;
	height: 350px;
	clear: both;
	margin: 0px auto 10px;
}

#contents #view p {
	bottom: 0px;
	right: 0px;
	position: absolute;
}

#contents .eleventh_img {
	display: none;
}

#contents .otherdays_img {
	display: none;
}

#thumbBtn {
	position:relative;
	margin:0 auto 20px auto;
	width:560px;
}

#thumbBtn li {
	width: 110px;
	height: 38px;
	padding:0;
	margin:2px 0px;
	float:left;
	text-align:right;
	cursor:pointer;
	opacity:1;
	filter:alpha(opacity=100);
	-ms-filter: "alpha( opacity=100 )";
}

#thumbBtn li.active, #thumbBtn li:hover {
	opacity:0.5;
	filter:alpha(opacity=50);
	-ms-filter: "alpha( opacity=50 )";
	width: 107px;
	border-left: solid 3px #ccc;
}

#thumbBtn li img {
	border: solid 0px #ccc;
}

#menu-title {
	position:absolute;
	top:260px;
	left:5px;
	width:120px;
	background:url(../pub/menu-product.jpg) no-repeat;
	padding-top:28px;
}

#menu-title li {
	width: 110px;
	height: 38px;
	padding:2px 0;
	margin:0px;
	float:left;
	text-align:right;
	cursor:pointer;
	opacity:1;
	filter:alpha(opacity=100);
	-ms-filter: "alpha( opacity=100 )";
}

#menu-title li.active, #menu-title li:hover {
	opacity:0.5;
	filter:alpha(opacity=50);
	-ms-filter: "alpha( opacity=50 )";
	width: 107px;
	border-left: solid 3px #ccc;
}

/*サーチボックス*/
.p-header__search {
    margin-left: auto;
    width: 100%;
    display: -webkit-box;
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
    -webkit-flex-shrink: 10;
    -ms-flex-negative: 10;
    flex-shrink: 10;
    height: 100%;
}
.p-searchform__select {
    font-family: 'Noto Sans Japanese', sans-serif;
    height: 100%;
    border: 1px solid #505050;
    border-radius: 3px 0 0 3px;
    font-size:80%;
}
.p-searchform__text {
    font-family: 'Noto Sans Japanese', sans-serif;
    background: #fff;
    -webkit-box-flex: 10;
    -webkit-flex-grow: 10;
    -ms-flex-positive: 10;
    flex-grow: 10;
    border: 0;
    border-top: 1px solid #505050;
    border-right: 0;
    border-bottom: 1px solid #505050;
    border-left: 0;
    height: 100%;
    width: 100%;
    padding-left: 0.5em;
}
.p-searchform__submit {
    font-family: 'Noto Sans Japanese', sans-serif;
    background: #505050;
    border: 0;
    color: #fff;
    width: 60px;
    font-size: 1em;
    border-top: 1px solid #505050;
    border-right: 1px solid #505050;
    border-bottom: 1px solid #505050;
    border-left: 0;
    border-radius: 0 3px 3px 0;
    height: 100%;
}


/*プレースフォルダ*/
.focus{
}

.searchbox{
position:relative;
width:100%;
max-width: 380px;
height:30px;
padding: 0 1em;
margin-top:20px;
float:right;
}

.searchsubmit{
margin:6px 10px 0 8px;
float:left;
}

.searchstock{
margin:12px 10px 0 3px;
}

.searchstock input{
vertical-align:middle;
}

/*TOOLTIP*/
.tooltip{
position:absolute;
left:-2000px;
background-color:#dedede;
padding:5px;
border:1px solid #fff;
width:280px;
}

div.tooltip{
position:absolute;
left:30px;
top:37px;
line-height:1.5;
color:#fff;
background:#fff;
border:2px solid #fff;
border-radius: 10px;
-moz-border-radius: 10px;
-webkit-border-radius: 10px;
box-shadow: 0px 0px 5px #666;
-moz-box-shadow: 0px 0px 5px #666;
-webkit-box-shadow: 0px 0px 5px #666;
padding:5px;
font-size:90%;
font-weight:bold;
display:block;
z-index:9999;
}

.tooltip p{
margin:0;
padding:0;
color:#333;
padding:5px 5px 0px 5px;
font-size:95%;
}

.att_topic{
position:relative;
margin:-5px auto 5px;
padding:7px 7px;
width:914px;
background:#F9CEC6;
border:2px solid #E7421F;
font-weight:bold;
color:#c00;
}

/* ▼表示領域が1000px未満の場合 */
@media screen and (max-width: 1000px) {
.searchbox {
    position: relative;
    width: 100%;
    max-width: none;
    height: 4em;
    padding: 0;
    margin-top: 1em;
    float: left;
}
.p-searchform__select {
    font-family: 'Noto Sans Japanese', sans-serif;
    height: 100%;
    border: 1px solid #505050;
    border-radius: 3px 0 0 3px;
    font-size: 100%;
    padding: 1em;
}
.p-searchform__text {
    font-family: 'Noto Sans Japanese', sans-serif;
    background: #fff;
    -webkit-box-flex: 10;
    -webkit-flex-grow: 10;
    -ms-flex-positive: 10;
    flex-grow: 10;
    border: 0;
    border-top: 1px solid #505050;
    border-right: 0;
    border-bottom: 1px solid #505050;
    border-left: 0;
    height: 100%;
    padding-left: 1em;
    font-size: 1rem;
}
div.tooltip {
    position: absolute;
    left: calc(50% - 250px);
    top: 4em;
    line-height: 1.5;
    color: #fff;
    background: #fff;
    border: 2px solid #fff;
    border-radius: 10px;
    -moz-border-radius: 10px;
    -webkit-border-radius: 10px;
    box-shadow: 0px 0px 5px #666;
    -moz-box-shadow: 0px 0px 5px #666;
    -webkit-box-shadow: 0px 0px 5px #666;
    padding: 5px;
    font-size: 1rem;
    font-weight: bold;
    display: block;
    z-index: 9999;
}
.tooltip {
    position: absolute;
    left: -2000px;
    background-color: #dedede;
    padding: 5px;
    border: 1px solid #fff;
    width: 500px;
}
#logo{
    padding:30px 20px 7px 5px;
}
#logo img {
/*    width: 100px;*/
}
#head{
    padding:160px 0px 0px;
}
#wrapper{
    padding:0px 10px 20px;
}
#ham-menu ul li a{
padding:10px 12px 10px 12px;
font-size:90%;
color:#333;
display:block;
}
}

/* backtotop
-------------------------------------------*/
#page-top {
	position: fixed;
	bottom: 5px;
	right: 30px;
	background: #999999;
  border-radius: 30px;
  z-index: 2;
}
#page-top a {
	padding:0;
	display: block;
}
#page-top a:hover {
	background: #cccccc;
  border-radius: 30px;
  overflow: visible;
}



/* brand
-------------------------------------------*/

.itemname {
	position: absolute;
	text-align:center;
	color:#fff;
	height: 0px;
  width:100%;
	left: 0;
	bottom:0;
	z-index: 2;
	overflow: hidden;
	background: rgba(0,0,0,.6);
	-webkit-transition: .3s;
	transition: .3s;
}

.itemname p {
  padding:0.5em;
}

#brand-list li:hover .itemname {
	height: 50px;
  width:100%;
}




.swiper-button-prev, .swiper-container-rtl .swiper-button-next {
    background-image: url(/pub/top_image/arrow-left.png);
    left: 10px;
    right: auto;
    width: 50px;
    height: 50px;
    background-size: contain;
}
.swiper-button-next, .swiper-container-rtl .swiper-button-prev {
    background-image: url(/pub/top_image/arrow-right.png);
    right: 10px;
    left: auto;
    width: 50px;
    height: 50px;
    background-size: contain;
}
    .swiper-pagination-bullet {
        width: 12px;
        height: 12px;
        text-align: center;
        line-height: 20px;
        font-size: 12px;
        color:#000;
        opacity: 1;
        background: rgba(255,255,255,1);
        border:1px solid #666;
        border-radius: 0%;
    }
    .swiper-pagination-bullet-active {
        color:#fff;
        background: #191c4e;
    }


/* ▼表示領域が1080px以上の場合 */
@media screen and (min-width: 1080px) {
.swiper-button-prev {
  left: calc(50% - 560px);
  right: auto;
}

.swiper-button-next {
  right: calc(50% - 560px);
  left: auto;
}
}
/* ▼表示領域が1079px未満の場合 */
@media screen and (max-width: 1079px) {
.swiper-button-prev {
  left: 0%;
  right: auto;
  display:none;
}

.swiper-button-next {
  right: 0%;
  left: auto;
  display:none;
}
}


/* ▼表示領域が750px未満の場合 */
@media screen and (max-width: 750px) {

  #brand-list li{
    width:calc((100% - 10px) / 2);
    margin-bottom: 10px;
  }

  #original {
    display: block;
  }

  #original_item {
    width: 100%;
    margin-bottom: 10px;
  }

  #original_item li {
    width: calc((100% - 10px) / 2);
    margin-bottom: 10px;
  }

  #original_title{
    width: 100%;
  }

  #original_title li{
    width:calc((100% - 10px) / 2);
  }

  #collabo{
    display: block;
  }

  #collabo_item{
    width:100%;
    margin-bottom: 20px;
  }

  #shop_info{
    width:100%;
  }

  #list_event_campaign{
    display: block;
  }

  #inner_event{
    width:100%;
    margin-bottom: 20px;
  }

  #inner_campaign{
    width:100%;
  }

  #list_title li{
    width:calc((100% - 15px) / 3);
  }

  #list_oshirase_media{
    display: block;
  }

  #list_oshirase{
    width:100%;
    margin-right:0;
    margin-bottom: 20px;
  }

  #list_media{
    width:100%;
  }

  #officialsns_mailmaga{
    display: block;
  }

  #officialsns{
    width:100%;
    margin-right:0;
    margin-bottom: 20px;
  }

  #mailmaga{
    width: 100%;
  }

  #mailmaga li img{
    width:8%;
  }

  .pixel {
    font-size:150% !important;
  }
}

/* ▼表示領域が500px未満の場合 */
@media screen and (max-width: 500px) {
  #ham-menu ul li a {
      padding: 10px;
      font-size: 80%;
  }
  #logo {
    padding: 30px 10px 7px 5px;
  }
  #logo img {
    width: 80px;
    width: 100px;
  }
}

/* baseから
-------------------------------------------*/
#sid {
    display: none;
}

/* メインコンテンツ
-------------------------------------------*/
#inner {
    width: 100%;
    max-width: 1080px;
    margin:0 auto;
    padding:10px;
}


.pixel {
  width: 100%;
  text-align: left;
  font-family:'Noto Sans Japanese', sans-serif;
  font-size:110%;
  font-weight:bold;
  padding-bottom:0.5em;
}

/* SNS
-------------------------------------------*/
#official-sns{
  width:100%;
  display: flex;
  flex-wrap: wrap;
  margin:20px 0 0 0;
}

#official-sns img{
  width:100%;
}

.sns-box {
  position: relative;
  display: flex;
  flex-wrap: nowrap;
  align-items: center;
  border: 1px solid #999;
  background: #fff;
  width: 22%;
  margin: 0 20px 0 0;
}

#official_twitter {
  width: 100%;
  margin: 0 0 20px 0;
  padding: 5px 0 5px 5px;
}

#official_twitter div {
  width: 8%;
}

#official_twitter a {
  display: flex;
  align-items: center;
  justify-content: center;
  width: calc(100%/4);
  background: #f1f1f1;
  margin: 0 5px 0 0;
  padding: .5em;
  height: 100%;
}

#official_twitter p, #official_instagram p {
  font-size: 12px;
  line-height: 1.2;
  margin-left: 5px;
  word-break: break-all;
}

#official_twitter img, #official_instagram img {
  border-radius: 50%;
  width: 50px;
}

#official_twitter div img, #official_instagram div img{
  width: 100%;
}

#official_instagram {
  width: 54%;
  margin: 0 20px 0 0;
  padding: 5px 0 5px 5px;
}

#official_instagram div {
  width: 16%;
}

#official_instagram a {
  display: flex;
  align-items: center;
  justify-content: center;
  width: calc(100%/2);
  background: #f1f1f1;
  margin: 0 5px 0 0;
  padding: .5em;
  height: 100%;
}

#sns-wrap {
  display: flex;
  width: 38%;
}

#official_twitter::before {
  content: 'X（旧Twitter）';
  position: absolute;
  top: -8px;
  left: -5px;
  background: #fff;
  font-size: 12px;
  padding: 0 8px;
}

#official_instagram::before {
  content: 'Instagram';
  position: absolute;
  top: -8px;
  left: -5px;
  background: #fff;
  font-size: 12px;
  padding: 0 8px;
}

#official_youtube::before {
  content: 'YouTube';
  position: absolute;
  top: -8px;
  left: -5px;
  background: #fff;
  font-size: 12px;
  padding: 0 8px;
}

#official_facebook::before {
  content: 'Facebook';
  position: absolute;
  top: -8px;
  left: -5px;
  background: #fff;
  font-size: 12px;
  padding: 0 8px;
}

#official_mail::before {
  content: 'メールマガジン';
  position: absolute;
  top: -8px;
  left: -5px;
  background: #fff;
  font-size: 11px;
  letter-spacing: -.5px;
  padding: 0 8px;
}

@media screen and (max-width: 1000px){
  #official_twitter span, #official_instagram span {
    display: none;
  }
}

@media screen and (max-width: 750px){
  #official-sns {
    width: 100%;
    display: block;
  }
  #sns-wrap {
    width: 100%;
  }
  #official_twitter, #official_instagram {
    width: 100%;
    margin: 0 0 30px;
    padding: 5px 0 5px 15px;
  }
  #official_twitter div, #official_instagram div {
    width: 30%;
  }
  #official_twitter img, #official_instagram img {
    width: 70px;
  }
  #official_twitter a, #official_instagram a {
    display: block;
    text-align: center;
    background: #ffffff;
    margin: 0;
  }
  #official_twitter p, #official_instagram p {
    margin: 5px 0 0;
  }
  #official_twitter::before,#official_facebook::before,#official_youtube::before,#official_instagram::before {
    font-size: 15px;
  }
  #official_mail::before {
    font-size: 14px;
  }
}

/* 動画
-------------------------------------------*/
.modal{
  height: 100vh;
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  z-index: 999;
  display: flex;
  justify-content: center;
  align-items: center;
}
.modal__bg{
  background: rgba(0,0,0,0.6);
  height: 100vh;
  position: absolute;
  width: 100%;
  cursor: pointer;
}

.modal__content {
  width: 90%;
  max-width: 1080px;
}

.modal__content>div{
  position: relative;
  padding-bottom: 56.25%;
  height: 0;
  overflow: hidden;
  margin: 0;
  width: 100%;
}

.modal__content iframe{
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  width: 90%;
  height: 90%;
  margin: auto;
}

.modal__content a{
  position: absolute;
  display: flex;
  justify-content: center;
  align-items: center;
  top: 0;
  right: 0;
  background: rgba(255,255,255,.8);
  width: 50px;
  height: 50px;
  font-weight: bold;
  border-radius: 50%;
}

.modal__content a:hover{
  text-decoration: none;
}

.modal__content a::after{
  content: '×';
  font-size: 30px;
  margin: auto;
  font-weight: bold;
  color: #000;
}