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

@import url(pc.css) print;
@import url(pc.css?6) screen and (min-width: 1450px);
@import url(smart.css?6) screen and (max-width: 1449px);

@import url('https://fonts.googleapis.com/css2?family=Cormorant:wght@400&display=swap');
.eng{ font-family: 'Cormorant', serif;}

/********************************************
 * reset
 ********************************************/
*{
	margin:0;
	padding:0;
	border:0;
	outline:0;
	background:transparent;
    box-sizing:border-box;
}
html{ scroll-behavior: smooth;}
img{ vertical-align:top;}


/********************************************
 * clearfix
 ********************************************/
.cf::after{
	content: "";
	display: table;
	clear: both;
}

/********************************************
* Now Loading
********************************************/
#overlay{ 
    position: fixed;
    top: 0;
    left: 0;
    z-index: 900;
    width: 100%;
    height:100%;
    display: none;
    background: rgba(0,0,0,0.6);
}
.cv-spinner {
    height: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
}
.spinner {
    width: 80px;
    height: 80px;
    border: 4px #ddd solid;
    border-top: 4px #999 solid;
    border-radius: 50%;
    animation: sp-anime 0.8s infinite linear;
}
@keyframes sp-anime {
    0% { transform: rotate(0deg); }
    100% { transform: rotate(359deg); }
}
.is-hide{
    display:none;
}

/********************************************
 * common
 ********************************************/
.fs10{ font-size:10px;}
.fs12{ font-size:12px;}
.fs14{ font-size:14px;}
.fs16{ font-size:16px;}
.fs18{ font-size:18px;}
.fs20{ font-size:20px;}
.fs24{ font-size:24px;}
.fs32{ font-size:32px;}
.fs48{ font-size:48px;}

.mb0{ margin-bottom:0 !important;}
.mb10{ margin-bottom:10px !important;}
.mb20{ margin-bottom:20px !important;}
.mb30{ margin-bottom:30px !important;}
.mb50{ margin-bottom:50px !important;}
.mb80{ margin-bottom:80px !important;}
.mb100{ margin-bottom:100px !important;}
.mt0{ margin-top:0 !important;}
.mt10{ margin-top:10px !important;}
.mt20{ margin-top:20px !important;}
.mt30{ margin-top:30px !important;}
.mt50{ margin-top:50px !important;}
.mt80{ margin-top:80px !important;}
.mt100{ margin-top:100px !important;}

.ta-l{ text-align: left;}
.ta-c{ text-align: center;}
.ta-r{ text-align: right;}

a{ color:#e17;}
p{ text-align: center;}

.center{ text-align:center;}
.left{ text-align:left; margin:0 15px;}
.txt-red{ color:#e17;}
.txt-pink{ color:#f3c;}
.txt-orange{ color:#f63;}
.txt-blue{ color:#18d;}

h3{ text-align: center;}
h2{ font-size: 16px; text-align: center;}

/********************************************
*  点滅 2024/1/21追記
********************************************/
.blink {
	animation: blinking 1s ease-in-out infinite alternate;
}
 
@keyframes blinking {
	0% {opacity: 0;}
	100% {opacity: 1;}
}

.blink_red {
  animation: blinkAnimeS2 2s infinite alternate;
	/*
	margin-left: 0.5em;
	padding-left: 0.5em;
	padding-right: 0.5em;
	*/
	font-size : 75%;
	vertical-align: middle;
}
@keyframes blinkAnimeS2{
   0%{ color : red;   background:white }
 100%{ color : white; background:red   }
}



/*--------------------------------------------------------------コンテンツ／mailmagazine*/
#mailmagazineInfo {
	background-color:#F2F2F2;
	padding:10px;
	clear: both;
}

/*メルマガ Tab*/
.ui-tabs {
	position: relative;
	zoom: 1;
} /* position: relative prevents IE scroll bug (element with position: relative inside container with overflow: auto appear as "fixed") */
.ui-tabs .ui-tabs-nav { text-align:center; margin: 0; padding:0; }
.ui-tabs .ui-tabs-nav li {
	display:inline-block;
	/display:inline;
	/zoom:1;
	list-style: none;
	border-bottom: 0 !important;
	padding: 0;
	white-space: nowrap;
	width:32%;
}
.ui-tabs .ui-tabs-nav li a {
	text-decoration: none;
	display: block;
	padding: 7px 5px;
  -webkit-border-radius: 6px 6px 0 0; 
  -moz-border-radius: 6px 6px 0 0;
  border-radius: 6px 6px 0 0;
	border-top:2px solid #999999;
	border-left:2px solid #999999;
	border-right:2px solid #999999;
	color:#999999;
}
.ui-tabs .ui-tabs-nav li.ui-tabs-selected a {
	padding-bottom:8px;
}
.ui-tabs .ui-tabs-nav li.ui-tabs-selected a.docomo {
	color:#b90405;
	border-top:2px solid #b90405;
	border-left:2px solid #b90405;
	border-right:2px solid #b90405;
	background-color:#FFE1E2;
}
.ui-tabs .ui-tabs-nav li.ui-tabs-selected a.au {
	color:#F60;
	border-top:2px solid #F60;
	border-left:2px solid #F60;
	border-right:2px solid #F60;
	background-color:#FFF1E8;
}
.ui-tabs .ui-tabs-nav li.ui-tabs-selected a.softbank {
	color:#666;
	border-top:2px solid #CCC;
	border-left:2px solid #CCC;
	border-right:2px solid #CCC;
	background-color:#F5F5F5;
}
.ui-tabs .ui-tabs-nav li.ui-tabs-selected a,
.ui-tabs .ui-tabs-nav li.ui-state-disabled a,
.ui-tabs .ui-tabs-nav li.ui-state-processing a {
cursor: text;
}
.ui-tabs .ui-tabs-nav li a,
.ui-tabs.ui-tabs-collapsible.ui-tabs-nav li.ui-tabs-selected a {
	cursor: pointer;
} /* first selector in group seems obsolete, but required to overcome bug in Opera applying cursor: text overall if defined elsewhere... */
.ui-tabs .ui-tabs-panel {
	display: block;
	border-width: 0;
	background: none;
}
.ui-tabs .ui-tabs-hide { display: none !important; }

#tabs-1,
#tabs-2,
#tabs-3 {
	clear: both;
}
#docomo {
	padding:8px;
	border:3px solid #b90405;
}
#au {
	padding:8px;
	border:3px solid #F60;
}
#softbank {
	padding:8px;
	border:3px solid #CCC;
}
.mailmagazineSetting dl {
	margin:0 auto;
	width:96%;
}
.mailmagazineSetting dt,
.mailmagazineSetting dd {
	text-align:left;
}
.mailmagazineSetting dt {
	font-size:1.2em;
	color: #8c7017;
	font-weight: bold;
}
.mailmagazineSetting dd {
	padding:5px;
}
 /* --- BOXの定義 -------------------------------------------------▼ラインマーカー*/
.MarkerGreen {
  display    : inline-block;
  position   : relative;
}
.MarkerGreen span {
  display    : inline-block;
  position   : absolute;
  top        : 0;
  left       : 0;
  bottom     : 0;
  right      : 0;
  background : linear-gradient(transparent 40%, rgba(0, 255, 0, 0.6) 60%);  /* ラインマーカーを付ける  */
  animation  : MarkerGreenAnime 3s ease-in infinite;  /* アニメ */
}
 /* --- アニメーションの設定 ------------------------------------ */
@keyframes MarkerGreenAnime {
   0% { right : 100%; }     /* 点滅開始色        */
  25% { right : 0;    }     /* 点滅終了色        */
 100% { right : 0;    }     /* 点滅終了色        */
}
 /* --- BOXの定義 -------------------------------------------------▼ラインマーカー*/

 /* --- INDEX コンセプト -------------------------------------------------▼コンセプト*/
#ageVerification {
	width: 95%;
	margin-top: 50px;
	margin-right: auto;
	margin-left: auto;
	margin-bottom: 100px;
	border-color: hotpink;
	border-style: double;
	border-width: 3px;
	color: deeppink;
	padding: 1em;
}
#ageVerification p {
	text-align: left;
}
 /* --- INDEX コンセプト -------------------------------------------------▲コンセプト*/

/*--------------------------------------------------------------▼めくれたテープ風_red*/
.box25_red{
    position: relative;
    background: #ffdddd;
    box-shadow: 0px 0px 0px 5px #ffc0cb;
    border: dashed 2px white;
    padding: 0.2em 0.5em;
    color: #FF0000;
}
.box25_red:after{
    position: absolute;
    content: '';
    right: -7px;
    top: -7px;
    border-width: 0 15px 15px 0;
    border-style: solid;
    border-color: #ffdb88 #fff #ffdb88;
    box-shadow: -1px 1px 1px rgba(0, 0, 0, 0.15);
}
.box25_red p {
    margin: 0; 
    padding: 0;
	font-size:16px;
}
.box25_red a{
  text-decoration: none;
}
.box25_red a:hover{
  text-decoration: underline;
}
/*--------------------------------------------------------------▲めくれたテープ風_red*/