@charset "utf-8";

@import url("https://use.typekit.net/fqs0hcc.css");

$font1:'linotype-didot', sans-serif;
$font2:'mrs-eaves', sans-serif;
$font3:'gioviale', sans-serif;
$red:#e5004f;
$red2:#cc0014;
$pink:#e4007f;
$purple:#af80ba;
$orange:#ff820d;
$blue:#0a85ff;
$green:#0cad3f;
$yellow:#fbb900;
$brown:#a3560f;
$gold:#ab9641;
$gray:#999791;
$black:#000;
$white:#cfceca;



/*-------------MIX　IN-------------*/
@mixin giji{
	position: absolute;
	content: "";
}
@mixin font1{
    font-family: 'gioviale', sans-serif;
    line-height: 1.2em;
}
@mixin flex{
	display: inline-flex;
	display: -webkit-inline-flex;
    display: -moz-inline-flex;
    display: -ms-inline-flex;
    display: -o-inline-flex;
	box-sizing: border-box;
}

@mixin stripe_red{
	opacity:0.7;
	-webkit-background-size: 30px 30px;
-moz-background-size: 30px 30px;
background-size: 30px 30px;
background-color: #fff;
background-image: -webkit-gradient(linear, 0 0, 100% 100%,
            color-stop(.25, $red), color-stop(.25, transparent),
            color-stop(.5, transparent), color-stop(.5, $red),
            color-stop(.75, $red), color-stop(.75, transparent),
            to(transparent));
background-image: -webkit-linear-gradient(-45deg, $red 25%, transparent 25%,
          transparent 50%, $red 50%, $red 75%,
          transparent 75%, transparent);
background-image: -moz-linear-gradient(-45deg, $red 25%, transparent 25%,
          transparent 50%, $red 50%, $red 75%,
          transparent 75%, transparent);
background-image: -ms-linear-gradient(-45deg, $red 25%, transparent 25%,
          transparent 50%, $red 50%, $red 75%,
          transparent 75%, transparent);
background-image: -o-linear-gradient(-45deg, $red 25%, transparent 25%,
          transparent 50%, $red 50%, $red 75%,
          transparent 75%, transparent);
background-image: linear-gradient(-45deg, $red 25%, transparent 25%,
          transparent 50%, $red 50%, $red 75%,
          transparent 75%, transparent);
}

@mixin shadow_blue{   
box-shadow:0px 0px 3px 0px #74cfea;
}

body{
	margin: 0;
	padding: 0;
	/*background:#e5d0b3;*/
	background: url("../img/bonus_bg.gif");
	letter-spacing: 0.1em;
	line-height: 1.2;
	text-align: center;
	
}
li{list-style: none;}


/*-------------PC用-------------*/
@media screen and (min-width:641px) {
    .wrapper{
        margin: 0 auto;
        width: 1200px;
        background: url("../img/202006summer_header_bg_02.gif")no-repeat;
    }
  
/*----header----*/
    header{
        position: relative;
        margin: 0 auto;
        padding: 20px 0;
    }
    .header_item01{
        @include giji;
            width: 169px;
            height: 130px;
            top:20px;
            left:120px;
    }
    .header_item02{
        @include giji;
            width: 147px;
            height: 115px;
            top:200px;
            left:100px;
    }
    .header_item03{
        @include giji;
            width: 181px;
            height: 128px;
            top:350px;
            left:120px;
    }
    .header_item04{
        @include giji;
            width: 183px;
            height: 94px;
            top:30px;
            right:120px;
    }
    .header_item05{
        @include giji;
            width: 141px;
            height: 110px;
            top:180px;
            right:100px;
    }
    .header_item06{
        @include giji;
            width: 180px;
            height: 118px;
            top:350px;
            right:120px;
    }
	
/*----read----*/
    h1{
        margin: 0 0 -30px;
        padding: 0;
        color: #0071DB;
        font-weight: 600;
        font-size: 16px;
        letter-spacing: 0.1em;
        line-height: 1.5;}
    
 /*----big menu----*/  
    
    .menu_big{
        @include flex;
        margin: 20px 0 0;
        width: 730px;
        justify-content: space-between;
        li{width: 330px;
        padding: 10px 0;}
        }
    .menu_big_cont{
        width: 100%;
        padding: 40px 0;
        box-sizing: border-box;
        .menu_big_ul{
            width: 530px;
            @include flex;
            justify-content: space-between;
            li{
                background: #fff;
                padding: 15px 5px;
                width: 230px;
                }
            li a{color: #4E4E4E; font-size: 1.2rem;
            display:block; }
            li a:hover{opacity: 0.5;}
    }
    }
    .lady{background: #fce5e6;}
    .lady a{font-family: $font2;
            color:$pink;
            font-weight: 600;
            font-size: 2.2rem;
    display:block;}
    .lady a:hover{opacity: 0.5;}
    .men{background: #48b2ff;}
    .men a{font-family: $font2;
            color:#ffffff; 
            font-weight: 600;
            font-size: 2.2rem;
    display:block;}
    .men a:hover{opacity: 0.5;}
    
/*----メインコンテンツ----*/
     .main_cont{
         position: relative;
        margin: 0 auto 100px;
        padding: 15px 0;
        box-shadow:0px 0px 3px 0px #dbdbdb;
       background: url("../img/bonus_summer_bg.gif")repeat;  
    }
    .main_cont:after{
        @include giji;
        background: url("../img/item_01.png")no-repeat;
        width: 164px;
        height: 110px;
        top:-15px;
        left:-15px;
    }
    
    
    .main_cont:before{
        @include giji;
        background: url("../img/item_02.png")no-repeat;
        width: 140px;
        height: 144px;
        bottom:-15px;
        right:-15px;
    }
    
    h2{position: relative;
        font-family: $font2;
        font-size: 2.5rem;
        color:$pink;
        width: 1200px;
        margin: 0 auto 15px;
        display: inline-block;
        p{font-size: 14px;
        font-weight: 0;
        margin-top: 15px;}}
    h2:after{
        @include giji;
        background: url("../img/202006summer_line.png")repeat-x;
        width: 1200px;
        height: 20px;
        top:40px;
        left: 0;
    }
    
    h3{ position: relative;
        margin: 0;
        padding: 0;}
    
    h3 p{@include giji;
        font-size: 12px;
        top:10px;
        left: 0;
        right: 0;}
    
    h3:after{@include giji;
        width: 100%;
        top:70px;
        left: 0;
        border-bottom: 2px solid #0093FF;
        border-top: 1px solid #0093FF;
        height: 2px;}
    
    h4{ position: relative;
        font-size: 2.5rem;
        font-family: $font2;
        color:$pink;
        margin: 0;
        padding: 0;}
    
    h4 p{
        font-size: 12px;
        }
    
    h4:after{@include giji;
        width: 100%;
        top:50px;
        left: 0;
        border-bottom: 2px solid #0093FF;
        border-top: 1px solid #0093FF;
        height: 2px;}
    
    h3 img{width: 200px;}
    
    
/*////item contents////*/    
    .item_cont{
         overflow: hidden;
        @include shadow_blue;
        background: #fff;
        width: 1140px;
        margin: 30px auto;
        padding: 15px 0;
    }
    .brand_bg{width: 100%;
    background: url("../img/menu_bg.png") repeat;
    margin-bottom: 50px;}
    
     	.brand_navi{
			@include flex;
			width: 1140px;
            background: #ffffff;
			justify-content: space-between;
			margin: 15px 0 ;
            padding-bottom: 5px;
			flex-wrap: wrap;
			li{width: 135px;
                background: #ffffff;
				text-align: center;
				margin-top: 5px;
				img{width:125px;
				margin: -5px;}
				.off_red{
					position: relative;
					background: #DB0003;
					padding: 1px;
					color: #ffffff;
					margin: -2px 10px 0;
					z-index: 55;
					width: 120px;
					font-size: 12px;}
			}
			li+ li {
              border-left: 1px solid  #A7A7A7;
				
}
			li:nth-child(9){border: none;}
		} 
    
    .item_navi{
			@include flex;
			width: 900px;
            background: #ffffff;
			justify-content: space-between;
			margin: 20px 0 ;
            padding: 0 30px 5px;
			flex-wrap: wrap;
			li{width: 175px;
                background: #ffffff;
				text-align: center;
				margin-top: 5px;
				img{width:162px;
				margin: -5px;}
                p{font-size: 2rem;
                color:$pink;
                font-family: $font2;}
                span{font-size: 12px;}
			}
    }
    .item_mnavi{
			@include flex;
			width: 700px;
            background: #ffffff;
			justify-content: space-between;
			margin: 20px 0 ;
            padding: 0 30px 5px;
			flex-wrap: wrap;
			li{width: 175px;
                background: #ffffff;
				text-align: center;
				margin-top: 5px;
				img{width:162px;
				margin: -5px;}
                p{font-size: 2rem;
                color:$pink;
                font-family: $font2;}
                span{font-size: 12px;}
			}
			
				
}

    
        /*////pickup contents////*/    
    
    .pickup{
        margin: 20px 0;
        position: relative;
        @include flex;
        width: 1100px;
        z-index: 555;
        justify-content: space-between;
        li{
            position: relative;
            width: 540px;
            padding: 5px 0 25px 0;
            box-sizing: border-box;
            
            .title{
                @include font1;
                letter-spacing: 0.1em;
                font-size: 2.8rem;
                font-weight: 600;
            }
            .title2{
                position: relative;
                margin: 10px 0 0;
               font-family: $font2;
                letter-spacing: 0.1em;
                font-size: 2rem;
                font-weight: 400;
                span{background: #fff;}
            }
            .title2:after{
                @include giji;
                top:24px;
                left:5%;
                width: 90%;
                border-bottom: 1px #000 solid;
                z-index: -1;
            }
            .brandlogo {position: relative;}
            .brandlogo img{width: 200px;}
            .sub{
                @include giji;
                top:15px;
                left: 0;
                right: 0;
                font-size: 11px;
                z-index: 555;
            }
            .btn{
                background: #007bed;
                color: #fff;
                display: inline;
                font-size: 14px;
                padding: 5px;
                
            }
            .btn a{color:#fff !important;}
            .btn:hover{background: #48B2FF;}
             .icon{
            @include giji;
            top:-10px;
            left:-5px;
        }
           }
       
    }
    .blueline{ border: 5px solid #c5e3ff;}
    .pickup_cont{
        width: 100%;
            @include flex;
            justify-content: space-between;
        li{text-align: left;
            position: relative;
            .brand{
                font-family: $font2;
                font-size: 1.5rem;
                font-weight: 600;
                letter-spacing: 0.1em;
            }
            .red{color: $pink;}
            p{font-size: 12px;}
            img{width: 230px;}
            .btn{
                position: absolute;
                background: #007bed;
                color: #fff;
                display: inline;
                font-size: 14px;
                padding: 5px;
                bottom: 10px;
                right: 10px;
            }
            .btn a{color:#fff !important;}
            .btn:hover{background: #48B2FF;}
        }
        }
    .pickup_3items{
        margin-bottom: 15px;
        @include flex;
        justify-content: space-between;
        width: 100%;
        li{width: 33%;
            .brand{font-family: $font2;
                font-size: 16px;
                font-weight: 600;
                letter-spacing: 0.1em;}
            img{width: 145px;}}
        
    }
    
    
/*----ボタン----*/
.button {
	margin:50px 0;
	font-family: $font2;
  display: inline-block;
  text-align: center;
  text-decoration: none;
  outline: none;
	padding: 10px 20px;
	font-size: 2rem;
		.small{font-size: 12px;}
}
.button::before,
.button::after {
  position: absolute;
  z-index: -1;
  display: block;
  content: '';
}
.button,
.button::before,
.button::after {
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
  -webkit-transition: all .3s;
  transition: all .3s;
}

.button {
  background-color:$blue;
  border: 2px solid $blue;
  color: #fff !important;
}
.button:hover {
  background-color: #fff;
  border-color: $blue;
  color: $blue !important;
}

}

/*-------------SP用-------------*/
@media screen and (max-width:640px) {
	
	header{margin: 0 auto;}
	
	
	.wrapper{
        margin: 0 auto;
        width: 100%;
        background: url("../img/202006summer_header_bg_sp.gif")no-repeat;
    }


 /*----read----*/
    h1{
        margin: 0 0 -20px;
        padding: 0;
        color: #0071DB;
        font-weight: 600;
        font-size: 16px;
        letter-spacing: 0.1em;
        line-height: 1.5;}
    
 /*----big menu----*/  
    
    .menu_big{
        @include flex;
        margin: 20px 0 0;
        width: 90%;
        justify-content: space-between;
        li{width: 48%;
        padding: 10px 0;}
        }
    .menu_big_cont{
        width: 100%;
        padding: 40px 0;
        box-sizing: border-box;
        .menu_big_ul{
            width: 95%;
            @include flex;
            justify-content: space-between;
            li{
                background: #fff;
                padding: 15px 5px;
                width: 45%;
                }
            li a{color: #4E4E4E; font-size: 16px;}
    }
    }
    .lady{background: #fce5e6;}
    .lady a{font-family: $font2;
            color:$pink;
            font-weight: 600;
            font-size: 1.8rem;}
    .men{background: #0a85ff;}
    .men a{font-family: $font2;
            color:#ffffff; 
            font-weight: 600;
            font-size: 1.8rem;}
    
    
/*----メインコンテンツ----*/
     .main_cont{
         position: relative;
        margin: 0 auto 50px;
        padding: 15px 0;
        box-shadow:0px 0px 3px 0px #dbdbdb;
       background: url("../img/bonus_summer_bg.gif")repeat;  
    }
    
    .main_cont:after{
        @include giji;
        background: url("../img/item_01.png")no-repeat;
         background-size: contain;
        width: 120px;
        height: 110px;
        top:-15px;
        left:-15px;
    }
    
    .main_cont:before{
        @include giji;
        background: url("../img/item_02.png")no-repeat;
        width: 100px;
        background-size: contain;
        height: 144px;
        bottom:-55px;
        right:0px;
    }
    
    h2{position: relative;
        font-family: $font2;
        font-size: 2.5rem;
        color:$pink;
        width: 100%;
        margin: 0 auto 15px;
        display: inline-block;
        p{font-size: 14px;
        font-weight: 0;
        margin-top: 15px;}}
    h2:after{
        @include giji;
        background: url("../img/202006summer_line.png")repeat-x;
        width: 100%;
        height: 20px;
        top:40px;
        left: 0;
    }
    
    h3{ position: relative;
        margin: 0;
        padding: 0;}
    
    h3 p{@include giji;
        font-size: 12px;
        top:10px;
        left: 0;
        right: 0;}
    
    h3:after{@include giji;
        width: 100%;
        top:70px;
        left: 0;
        border-bottom: 2px solid #0093FF;
        border-top: 1px solid #0093FF;
        height: 2px;}
    
    h3 img{width: 200px;}
    
    
    h4{ position: relative;
        font-size: 1.5rem;
        font-family: $font2;
        color:$pink;
        margin: 0;
        padding: 0;}
    
    h4 p{
        font-size: 12px;
        }
    
    h4:after{@include giji;
        width: 100%;
        top:40px;
        left: 0;
        border-bottom: 2px solid #0093FF;
        border-top: 1px solid #0093FF;
        height: 2px;}
    
      /*////item contents////*/    
    .item_cont{
         overflow: hidden;
        @include shadow_blue;
        background: #fff;
        width: 95%;
        margin: 30px auto;
        padding: 15px 0;
    }
    .brand_bg{width: 100%;
    background: url("../img/menu_bg.png") repeat;
    margin-bottom: 50px;}
    
     	.brand_navi{
			@include flex;
			width: 98%;
            background: #ffffff;
			justify-content: space-between;
			margin: 15px 0 ;
            padding-bottom: 5px;
			flex-wrap: wrap;
			li{width: 24%;
                background: #ffffff;
				text-align: center;
				margin-top: 5px;
				img{width:100%;
				margin: -5px;}
		
			}
			li+ li {
              border-left: 1px solid  #A7A7A7;
				
}
			li:nth-child(5){border: none;}
            li:nth-child(9){border: none;}
            li:nth-child(13){border: none;}
		}  
    
    .item_navi{
			@include flex;
			width: 95%;
            background: #ffffff;
			justify-content: space-between;
			margin: 20px 0 ;
            padding: 0 30px 5px;
			flex-wrap: wrap;
			li{width: 45%;
                background: #ffffff;
				text-align: center;
				margin-top: 5px;
				img{width:100%;
				margin: -5px;}
                p{font-size: 2rem;
                color:$pink;
                font-family: $font2;}
                span{font-size: 12px;}
			}
    }
		.item_mnavi{
			@include flex;
			width: 95%;
            background: #ffffff;
			justify-content: space-between;
			margin: 20px 0 ;
            padding: 0 30px 5px;
			flex-wrap: wrap;
			li{width: 33%;
                background: #ffffff;
				text-align: center;
				margin-top: 5px;
				img{width:100%;
				margin: -5px;}
                p{font-size: 1.5rem;
                color:$pink;
                font-family: $font2;}
                span{font-size: 12px;}
			}				
}
    
    
 /*////pickup contents////*/    
    
    .pickup{
        overflow: hidden;
        margin: 20px 0; 
        position: relative;
        @include flex;
        width: 98%;
        z-index: 555;
        justify-content: space-between;
        flex-wrap: wrap;
        li{width: 100%;
            margin-top: 10px;
            padding: 5px 0 25px 0;
            box-sizing: border-box;
            .sub{font-size: 11px;}
            .title{
                @include font1;
                letter-spacing: 0.1em;
                font-size: 2.8rem;
                font-weight: 600;
            }
            .title2{
                position: relative;
                margin: 10px 0 0;
               font-family: $font3;
                letter-spacing: 0.1em;
                font-size: 2rem;
                font-weight: 400;
                span{background: #fff;}
            }
            .title2:after{
                @include giji;
                top:24px;
                left:5%;
                width: 90%;
                border-bottom: 1px #000 solid;
                z-index: -1;
            }
             
            .btn{
                background: #007bed;
                color: #fff;
                display: inline;
                font-size: 14px;
                padding: 5px;
                
            }
            .btn a{color:#fff !important;}
            .btn:hover{background: #48B2FF;}
            
           }
        .icon{
            @include giji;
            top:-10px;
            left:-5px;
        }
    }
     .blueline{ border: 5px solid #c5e3ff;}
    
    .pickup_cont{
        width: 100%;
            @include flex;
            justify-content: space-between;
        flex-wrap: wrap;
        li{text-align: center;
            position: relative;
            width: 50%;
            .brand{
                font-family: $font2;
                font-size: 1.5rem;
                font-weight: 600;
                letter-spacing: 0.1em;
            }
            .red{color: $red;}
            p{font-size: 12px;
                padding: 5px;
                text-align: left;
            margin-bottom: 20px;}
            img{width: 80%;}
            .btn{
                margin: 30px 0 15px;
                
                background: #007bed;
                color: #fff;
                
                font-size: 14px;
                padding: 5px;
                /*bottom: 10px;
                right: 10px;*/
            }
            .btn a{color:#fff !important;}
            .btn:hover{background: #48B2FF;}
        }
        }
    .pickup_3items{
        margin-bottom: 15px;
        @include flex;
        justify-content: space-between;
        width: 100%;
        li{width: 33%;
            .brand{font-family: $font2;
                font-size: 16px;
                font-weight: 600;
                letter-spacing: 0.1em;}
            img{width: 90%;}}
        
    }
       
    
	
	/*----ボタン----*/
.button {
	margin:50px 0 30px;
	font-family: $font1;
  display: inline-block;
  text-align: center;
  text-decoration: none;
  outline: none;
	padding: 10px 20px;
	font-size: 1.5rem;
		.small{font-size: 12px;}
}
.button::before,
.button::after {
  position: absolute;
  z-index: -1;
  display: block;
  content: '';
}
.button,
.button::before,
.button::after {
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
  -webkit-transition: all .3s;
  transition: all .3s;
}


.button {
  background-color:$blue;
  border: 2px solid $blue;
  color: #fff !important;
}
.button:hover {
  background-color: #fff;
  border-color: $blue;
  color: $blue !important;
}		
}