@charset "utf-8";
 @import url("https://use.typekit.net/iiy5abe.css");
$font1:paganini-open, sans-serif;
$font2:hypatia-sans-pro, sans-serif;
$red:#AF0003;

/*-------------MIX　IN-------------*/
@mixin giji{
	position: absolute;
	content: "";
}
@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{
-webkit-background-size: 30px 30px;
-moz-background-size: 30px 30px;
background-size: 30px 30px;
background-color: #fce2e2;
background-image: -webkit-gradient(linear, 0 0, 100% 100%,
            color-stop(.25, #ff5858), color-stop(.25, transparent),
            color-stop(.5, transparent), color-stop(.5, #ff5858),
            color-stop(.75, #ff5858), color-stop(.75, transparent),
            to(transparent));
background-image: -webkit-linear-gradient(-45deg, #ff5858 25%, transparent 25%,
          transparent 50%, #ff5858 50%, #ff5858 75%,
          transparent 75%, transparent);
background-image: -moz-linear-gradient(-45deg, #ff5858 25%, transparent 25%,
          transparent 50%, #ff5858 50%, #ff5858 75%,
          transparent 75%, transparent);
background-image: -ms-linear-gradient(-45deg, #ff5858 25%, transparent 25%,
          transparent 50%, #ff5858 50%, #ff5858 75%,
          transparent 75%, transparent);
background-image: -o-linear-gradient(-45deg, #ff5858 25%, transparent 25%,
          transparent 50%, #ff5858 50%, #ff5858 75%,
          transparent 75%, transparent);
background-image: linear-gradient(-45deg, #ff5858 25%, transparent 25%,
          transparent 50%, #ff5858 50%, #ff5858 75%,
          transparent 75%, transparent);
}

body{
	margin: 0;
	padding: 0;

	letter-spacing: 1.2px;
	line-height: 1.2;
	text-align: center;
}
li{list-style: none;}
.txtx{text-decoration: line-through;}

.fade-in {
	-webkit-animation: fade-in 1.2s cubic-bezier(0.390, 0.575, 0.565, 1.000) 0.5s both;
	        animation: fade-in 1.2s cubic-bezier(0.390, 0.575, 0.565, 1.000) 0.5s both;
}
/*-------------PC用-------------*/
@media screen and (min-width:641px) {

/* 共通--------------------- */	
/* Hover */
.hover:hover {
	filter: alpha(opacity=70);  /* IE7以下用 */
	-ms-filter: "alpha(opacity=70)"; /* IE8用 */
	-moz-opacity: 0.7; /* Firefox 1.5未満, Netscape用 */
	-khtml-opacity: 0.7; /* Safari 1.x, 他khtmlに対応したブラウザ用  */
	opacity: 0.7; /* Firefox 1.5以上, Opera, Safari用 */
}
.pagetop {
	display: none;
	position: fixed;
	bottom: 30px;
	right: 15px;
}
.pagetop a {
	display: block;
	background-color: #ccc;
	text-align: center;
	color: #222;
	font-size: 12px;
	text-decoration: none;
	padding: 5px 10px;
	filter: alpha(opacity=50);
	-moz-opacity: 0.5;
	opacity: 0.5;
}
.pagetop a:hover {
	display: block;
	background-color: #b2d1fb;
	text-align: center;
	color: #fff;
	font-size: 12px;
	text-decoration: none;
	padding: 5px 10px;
	filter: alpha(opacity=50);
	-moz-opacity: 0.5;
	opacity: 0.5;
}
#rightBox2 {
	width: 80px;
	position: fixed;
	top: 20px;
	right: 10px;
}
#coupon {
	width: 65px;
	position: fixed;
	top: 140px;
	right: 20px;
}
#footer {
	font-size: 0;
	margin-bottom: 20px;
	text-align: center;
}
#footer li {
	display: inline-block;
	font-size: 12px;
	margin-right: 15px;
}
#footer li:first-child:after {
	content: "/";
	margin-left: 15px;
	color: #000;
}
#footer li a {
	color: #000;
}
.sp_banner {
	display: none;
}
#iframe {
	background: #fff;
	width: 1050px;
	padding: 20px 0 0 10px;
	margin: 0 auto 20px;
}
.pc {
	display: block !important;
}
.sp {
	display: none !important;
}
/* 共通ここまで--------------------- */	

header {
	width: 100%;
}
header img {
	width: 100%;
	height: auto;
	margin: 0 auto;
}

.read{
margin: 50px auto 30px;
font-size: 16px;
line-height: 1.5;}

.navi_menu{@include flex;
justify-content: space-between;
margin: 20px auto 50px;
width: 1000px;
li{width: 19%;
padding: 20px 0;
p{font-family: $font1;
margin: 5px 0;
font-size: 2.5rem;
letter-spacing: 0.08em;}
.eu{font-size: 1.5rem;}
span{font-size: 12px;}
.ar{font-size: 1.5rem;}
}
li a{display: block;}}

.italy_nav{background: #e8f8fb;}
.usa_nav{background: #fdeff0;}
.france_nav{background: #fef6ea;}
.england_nav{background: #f9f2f8;}
.other_nav{background: #eff8f2;}

article{width: 100%;
padding: 40px 0;}

#italy{background: #50999c;}
#usa{background: #ca7a87;}
#france{background: #E5C247;}
#england{background: #A78DAD;}
#other{background: #c1e4cd;}
.content{
margin: 0 auto;
width: 1050px;
background: #fff;
text-align: center;
padding: 30px 0;
}

.coutry{
font-family: $font1;
font-size: 3rem;
font-weight: normal;
>p img{width: 4%;}
>span{font-size: 12px;}
}
.info{font-size: 12px;
letter-spacing: 0.1em;
line-height: 1.6;
margin: 10px;
width: 600px;
margin:20px auto 0;
font-weight: normal;}

.otherbrand{
position: relative;
margin: 70px auto 20px;
font-family: $font2;
font-size: 1.5rem;
font-weight: normal;
z-index: 5;
span{background: #fff;
padding: 0 10px;}
}

.otherbrand:after{
position: absolute;
content: "";
border-bottom: 1px solid #000000;
top:20px;
left:10%;
width: 80%;
z-index: -1;
}

.brandlist01{
@include flex;
justify-content: space-between;
width: 920px;
margin: 30px auto 0;
li{width: 24%;
>p{img{width: 70%;}}
.btn01{width: 80%;
margin: 10px auto 0;
padding: 5px 0;
background: #E9E9E9;
font-size: 12px;}
.btn01 a{display: block;}}
}

.brandlist02{
@include flex;
flex-wrap: wrap;
justify-content: space-between;
width: 680px;
margin-bottom: 30px;
li{
width: 32.5%;
margin-top: 5px;
border: 1px solid #DDDDDD;
padding: 5px 0;
img{width: 80%;}}
}

.otherflag{img{width: 20%;}
margin: 20px 0;}

.se-content {
	margin: 30px auto 50px;
	width: 1060px;
	overflow: hidden;
}

.se-content dl {
	float: left;
	margin: 50px 30px 0 0;
	width: 188px;
	text-align: center;
}
.se-content dl:nth-child(5n) {
	margin-right: 0;
}
.se-content dt {
	font-weight: bold;
	margin-bottom: 20px;
}
.se-content dd {
	margin-bottom: 10px;
	font-weight: normal;
}		

 .button {
  margin-top: 30px;
  display: inline-block;
  text-align: center;
  text-decoration: none;
letter-spacing: 0.1em;
  outline: none;
	padding: 5px;
	font-size: 16px;
}
.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:#000;
  border: 2px solid #000;
  color: #fff !important;
}
.button:hover {
  background-color: #fff;
  border-color: #000;
  color: #000 !important;
}

}


/*-------------SP用-------------*/
@media screen and (max-width:640px) {

#rightBox3 {
	display: none;
}
#rightBox2 {
	display: none;
}
#coupon {
	display: none;
}
img {
	width: 100%;
	height: auto;
}
.pagetop {
	z-index: 3;
	display: none;
	position: fixed;
	bottom: 30px;
	right: 15px;
}
.pagetop a {
	display: block;
	background-color: #ccc;
	text-align: center;
	color: #222;
	font-size: 12px;
	text-decoration: none;
	padding: 5px 10px;
	filter: alpha(opacity=50);
	-moz-opacity: 0.5;
	opacity: 0.5;
}
.pagetop a:hover {
	display: block;
	background-color: #b2d1fb;
	text-align: center;
	color: #fff;
	font-size: 12px;
	text-decoration: none;
	padding: 5px 10px;
	filter: alpha(opacity=50);
	-moz-opacity: 0.5;
	opacity: 0.5;
}
.sp_banner {
	width: 100%;
	margin: 0 auto;
	list-style: none;
}
.sp_banner li {
	margin-bottom: 10px;
}
#header {
	width: 100%;
	margin: 0 auto;
	padding-top: 20px;
}
#header h1 {
	margin: 0 auto;
	width: 100%;
}
#footer {
	font-size: 0;
	margin-bottom: 20px;
	text-align: center;
}
#footer li {
	display: inline-block;
	font-size: 12px;
	margin-right: 15px;
}
#footer li:first-child:after {
	content: "/";
	margin-left: 15px;
	color: #FFF;
}
#footer li a {
	color: #FFF;
}
.pc {
	display: none !important;
}
.sp {
	display: block !important;
}	
/* 共通ここまで--------------------- */

header {
	width: 100%;
}
header img {
	width: 100%;
	height: auto;
	margin: 0 auto;
}

.read{
margin: 50px auto 30px;
font-size: 16px;
line-height: 1.5;}

.navi_menu{@include flex;
justify-content: center;
margin: 20px auto 50px;
width: 98%;
flex-wrap: wrap;
li{width: 30%;
margin: 5px 5px;
padding: 20px 0;
img{width: 50%;}
p{font-family: $font1;
margin: 5px 0;
font-size: 1.5rem;
letter-spacing: 0.08em;}
.eu{font-size: 1rem;}
span{font-size: 12px;}
.ar{font-size: 1.5rem;}
}
li a{display: block;}}

.italy_nav{background: #e8f8fb;}
.usa_nav{background: #fdeff0;}
.france_nav{background: #fef6ea;}
.england_nav{background: #f9f2f8;}
.other_nav{background: #eff8f2;}

article{width: 100%;
padding: 40px 0;}

#italy{background: #50999c;}
#usa{background: #ca7a87;}
#france{background: #E5C247;}
#england{background: #A78DAD;}
#other{background: #c1e4cd;}
.content{
margin: 0 auto;
width: 95%;
background: #fff;
text-align: center;
padding: 30px 0;
}

.coutry{
font-family: $font1;
font-size: 3rem;
font-weight: normal;
>p img{width: 10%;}
>span{font-size: 12px;}
}
.info{font-size: 12px;
letter-spacing: 0.1em;
line-height: 1.6;
margin: 10px;
width: 80%;
margin:20px auto 0;
font-weight: normal;}

.otherbrand{
position: relative;
margin: 50px auto 20px;
font-family: $font2;
font-size: 1.5rem;
font-weight: normal;
z-index: 5;
span{background: #fff;
padding: 0 10px;}
}

.otherbrand:after{
position: absolute;
content: "";
border-bottom: 1px solid #000000;
top:20px;
left:10%;
width: 80%;
z-index: -1;
}

.brandlist01{
@include flex;
justify-content: space-between;
width: 95%;
flex-wrap: wrap;
margin: 30px auto 0px;
li{width: 48%;
margin-top: 10px;
margin-bottom: 20px;
>p{img{width: 70%;}}
.btn01{width: 80%;
margin: 10px auto 0;
padding: 5px 0;
background: #E9E9E9;
font-size: 12px;}
.btn01 a{display: block;}}
}

.brandlist02{
@include flex;
flex-wrap: wrap;
justify-content: space-between;
width: 98%;
margin-bottom: 30px;
li{
width: 49%;
margin-top: 5px;
border: 1px solid #DDDDDD;
padding: 5px 0;
img{width: 80%;}}
}

.otherflag{img{width: 20%;}
margin: 20px 0;}

.se-content {
	margin: 30px auto;
	width: 100%;
	overflow: hidden;
}
.se-content h2 {
	/*margin: 0 0 80px 50px;*/
	width: 40%;
	margin: 0 auto 30px;
}
.se-content h3 {
	text-align: center;
	margin-bottom: 20px;
	}	
.se-content dl {
	margin: 0 auto 20px;
	width: 90%;
	text-align: center;
	overflow: hidden;
}
.se-content dt {
	font-weight: bold;
	margin-bottom: 10px;
}
.se-content dd {
	margin: 0 20px 10px 0;
	float: left;
	background-color: #ccc;
	padding: 5px 10px;
}	

 .button {
  margin-top: 10px;
  display: inline-block;
  text-align: center;
  text-decoration: none;
letter-spacing: 0.1em;
  outline: none;
	padding: 5px;
	font-size: 16px;
}
.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:#000;
  border: 2px solid #000;
  color: #fff !important;
}
.button:hover {
  background-color: #fff;
  border-color: #000;
  color: #000 !important;
}

}

/* ----------------------------------------------
 * Generated by Animista on 2021-1-29 16:1:46
 * Licensed under FreeBSD License.
 * See http://animista.net/license for more info. 
 * w: http://animista.net, t: @cssanimista
 * ---------------------------------------------- */

/**
 * ----------------------------------------
 * animation fade-in
 * ----------------------------------------
 */
@-webkit-keyframes fade-in {
  0% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}
@keyframes fade-in {
  0% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}