@charset "utf-8";
/* CSS Document */
/* ----------------------------------------------------------------------------------------
固定css
-------------------------------------------------------------------------------------------- */
a {
 display: block;
}
a.opacity:hover {
 opacity: .6;
  -webkit-transition: all 300ms ease-in-out;
  transition: all 300ms ease-in-out;
}
.totop a {
	display: none!important;
}
html {
	scroll-behavior: smooth;
}
small {
	font-size: 80%;
}
/* ----------------------------------------------------------------------------------------
813px以上の固定css(PC)
-------------------------------------------------------------------------------------------- */
@media screen and (min-width: 813px) {
.sp {
  display: none;
 }
 .pc {
  display: block;
 }
.home {
  position: fixed;
  top: 15px;
  left: 15px;
  width: 20%;
  max-width: 140px;
  z-index: 1000;
}
}
/* ----------------------------------------------------------------------------------------
今回追加した813px以上のcss(PC)
-------------------------------------------------------------------------------------------- */
.bg_white {
	background-color: #fff;
	padding: 60px 0;
}
h1 {
	color: #fff;
	text-align: center;
	font-size: 2.4vw;
	font-weight: 800;
	padding: 60px;
}
.lemino_color {
	background: linear-gradient(90deg,rgba(255, 168, 38, 1) 0%, rgba(255, 0, 128, 1) 100%);
	-webkit-background-clip: text;
	-webkit-text-fill-color: transparent;
}
.big {
	font-size: 125%;
}
.bold {
	font-weight: 700;
}
.gold_tx {
	color: #bc9500;
}
.red_tx {
	color: #d80b29;
}
.pink_tx {
	color: #ff0e6e;
}
ul li a {
	display: inline;
	text-decoration: underline;
}
.yellow_box {
	background-color: #fffce0;
	padding: 1em;
	max-width: 1000px;
	width: 100%;
	margin: 0 auto 30px;
	text-align: center;
}
.yellow_box a {
	display: inline;
	text-decoration: underline;
	color: #0064FF;
}
/*----------------------------------------------------------------
tab
----------------------------------------------------------------*/
.tab_box .btn_area {
	display: flex;
	gap: 5px;
}
.tab_box .tab_btn {
	width: 33%;
	background: #fff;
	color: #FFF;
}
.tab_box .btn_area ul{
	display: flex;
}
.tab_box .tab_btn:hover {
	background-color: #fff;
}
.tab_box .tab_panel {
	display: none;
}
.tab_box .tab_panel.active {
	display: block;
}
.tab_contract_area{
	max-width: 1000px;
	margin: 0 auto 3em;
	width: 90%;
}
.tab_contract_area .tab {
		width: 100%;
}
.tab_contract_area .tab-content {
	width: 100%;
}
.tab_contract_area .tab ul li{
	font-size: 25px;
}
.tab_contract_area .tab ul li:not(.active) div {
	position: relative;
	height: 100%;
}
.tab {
	 width: 100%;
	 margin: 0 auto;
}
.tab ul {
	 display: flex;
	 justify-content: space-between;
}
.tab ul li.active {
		width: 33%;
		background: #fff;
		color: #FFF;
		/*pointer-events: none;*/
}
.tab ul li.active::before {
	position: absolute;
	bottom: -35px;
	left: 50%;
	transform: translateX(-50%);
	width: 70px;
	height: 35px;
	background-color: #2589d0;
	content: '';
	clip-path: polygon(0 0, 100% 0, 50% 100%);
	z-index: 999;
}
.tab ul li picture{
	width:90%;
	display: inline-block;
	padding: 5px 0;
}
.tab ul li {
 width: 33%;
 text-align: center;
 background-color: #FFF;
 color: #151515;
 box-sizing: border-box;
 position: relative;
 font-size: 30px;
 border: 3px solid #555;
}
.tab ul li:not(.active) {
	cursor: pointer;
	background: #ededed;
	transition: transform 0.5s;
}
.tab ul li:not(.active):hover {
  opacity: 1;
}
.tab ul li:not(.active) div {
   position: relative;
   /*background-color: #FFF;*/
   height: 100%;
}
 .tab-content {
   display: none;
   width: 100%;
   border-top: none;
   box-sizing: border-box;
   margin: 0 auto;
   padding: 0.5em 0 0;
 }
 .tab-content.active {
   display: block;
	 position: relative;
 }
 
.tab ul li div.tab_title p{
	color: #fff;
	width: 100%;
	text-align: center;
	font-size: 0.8em;
	font-weight: bold;
}
.tab ul li.active p{
	background: #ff0d73;
}
.tab ul li:not(.active) p{
	background: #555;
}
.tab_box_inner{
	
}
/*-----------------------------------------------------------------
tab内デザイン 01 ドコモ ポイ活 MAX eximo ポイ活 ご契約の方＆ポイ活
-----------------------------------------------------------------*/
.tab_inner.eximo {
	background: url("../images/dot_beige.webp") repeat top left /10px #fff;
	border: 3px solid #b97853;
}
.tab ul li.tab_01.active {
	border: 3px solid #b97853;
}
.tab ul li.tab_01.active p{
	background: #b97853;
}
.tab ul li.tab_01.active::before {
	background-color: #b97853;
}
.tab ul li.tab_01:not(.active):hover{
  border: 3px solid #b97853;
}
.tab ul li.tab_01:not(.active):hover p{
  background: #b97853;
}
/*-----------------------------------------------------------------
tab内デザイン 02 ドコモ回線またはドコモ回線以外
-----------------------------------------------------------------*/
.tab_inner.entry {
	background: url("../images/dot_pink.webp") repeat top left /10px #fff;
	border: 3px solid #ff0e6e;
}
.tab_inner.entry .content_img {
	width: 60%;
	margin: auto;
}
.tab_inner.entry .plan_box .content_img {
	width: 100%;
	margin: 20px auto;
}
.tab ul li.tab_02.active {
	border: 3px solid #ff0e6e;
}
.tab ul li.tab_02.active p{
	background: #ff0e6e;
}
.tab ul li.tab_02.active::before {
	background-color: #ff0e6e;
}
.tab ul li.tab_02:not(.active):hover{
  border: 3px solid #ff0e6e;
}
.tab ul li.tab_02:not(.active):hover p{
  background: #ff0e6e;
}
/*-----------------------------------------------------------------
tab内デザイン 03 ドコモ MAX ドコモ ポイ活 MAX ドコモ ポイ活 20 eximo・eximo ポイ活 ahamo ギガホ
-----------------------------------------------------------------*/
.tab_inner.bakuage {
	background: url("../images/dot_red.webp") repeat top left /10px #fff;
	border: 3px solid #d80b29;
}
.plan_box .content_img {
	margin: 20px auto;
}
.tab ul li.tab_03.active {
	border: 3px solid #d80b29;
}
.tab ul li.tab_03.active p{
	background: #d80b29;
}
.tab ul li.tab_03.active::before {
	background-color: #d80b29;
}
.tab ul li.tab_03:not(.active):hover{
  border: 3px solid #d80b29;
}
.tab ul li.tab_03:not(.active):hover p{
  background: #d80b29;
}
/*-----------------------------------------------------------------
tab内デザイン 
-----------------------------------------------------------------*/
.tab_inner {
	background: url("../images/dot_black.webp") repeat top left /10px #fff;
	border: 3px solid #666;
	margin-top: 5px;
	border-radius: 15px;
	padding: 20px 30px;
}
.tab_inner h2 {
	text-align: center;
	font-size: 1.8em;
	font-weight: 500;
	line-height: 1.5;
	padding: 20px 0;
}
.attention_dot {
	padding: 15px;
	margin: 20px auto;
	font-size: 16px;
	border-radius: 10px;
	background-color: #fff;
	border: 3px solid #ddd;
}
.attention_dot li {
	padding: 5px 0;
}
.btn a{
	margin: 20px auto;
	position: relative;
	border-radius: 5px;
}
.btn a span.arrow{
	background: url("../images/playbtn.png") no-repeat center/20px;
	position: absolute;
	top: 50%;
	transform: translateY(-50%);
	right: 20px;
	width: 20px;
	height: 20px;
}
.btn.poikatsu a{
	background: #a97c62;
}
.btn.bakuage a{
	background: #d70a2f;
}
.lead_tx {
	font-size: 1.8em;
	font-weight: 700;
	text-align: center;
	padding-top: 40px;
	line-height: 1.4;
}
.lead_tx small {	
	font-weight: 300!important;
}
.attention_red {
	padding: 15px;
	margin: 20px auto;
	font-size: 14px;
	border-radius: 10px;
	background-color: #fff;
	border: 3px solid #FF0004;
	color: #FF0004;
}
.attention_red li {
	padding: 5px 0;
}
.plan_box {
	background-color: #fffaef;
	border-radius: 10px;
	border: 3px solid #ffdd9b;
	padding: 20px;
	margin: 20px auto;
}
.plan_box .lead_tx {
	padding-top: 0;
}
.attention {
	margin-top: 20px!important;
}
/* ----------------------------------------------------------------------------------------
812px以下の固定css(SP)
-------------------------------------------------------------------------------------------- */
@media screen and (max-width: 812px) {
 .common_footer_wrapper .footer_inner {
  width: 93%!important;
 }
 /*ユーザーエージェント出し分け用*/
.iphone .android_show, .iphone .pc_show {display:none;}
.android .iphone_show, .android .pc_show {display:none;}
.pc .iphone_show, .pc .android_show {display:none;}
.pc .visible .iphone_show, .pc .visible .android_show {display:block;}
body {
  -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
  -webkit-text-size-adjust: 100%;
  -webkit-touch-callout: none;
  -webkit-user-select: none;
  font-family: 'Noto Sans JP', "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic", Helvetica, sans-serif;
  }
 .sp {
  display: block;
 }
 .pc {
  display: none!important;
 }
 .home {
  position: fixed;
  top: 14px;
  left: 10px;
  width: 20%;
  max-width: 130px;
  z-index: 1000;
 }
 /* ----------------------------------------------------------------------------------------
今回追加した812px以下のcss(SP)
-------------------------------------------------------------------------------------------- */
.bg_white {
	padding: 30px 10px;
}
h1 {
	font-size: 5vw;
	padding: 50px 0 30px;
}
.yellow_box {
	text-align: left;
}
/*----------------------------------------------------------------
tab
----------------------------------------------------------------*/
.tab ul li div.tab_title p {
	font-size: 14px;
	line-height: 1.2;
	padding: 0 3px 3px;
}
.tab ul li picture {
    width: 100%;
    padding: 5px 2px;
}
.tab_contract_area {
	width: 100%;
	margin: 0 auto 0;
}
.tab_box .tab_btn:hover {
    background-color: #fff;
}
.tab ul li.active::before {
	bottom: -25px;
	width: 50px;
	height: 25px;
}
/*-----------------------------------------------------------------
tab内デザイン 
-----------------------------------------------------------------*/
.tab_inner {
	margin-top: 3px;
	padding: 30px 10px 0;
}
.tab_inner h2 {
	font-size: 1.2em;
	padding: 0 0 20px;
}
.attention_dot {
	padding: 10px;
	font-size: 13px;
}
.btn a{
	font-size: 15px!important;
}
.btn a span.arrow{
	background: url("../images/playbtn.png") no-repeat center/14px;
	right: 8px;
	width: 14px;
	height: 14px;
}
.lead_tx {
	font-size: 1.4em;
	padding-top: 20px;
}
.lead_tx small {	
	font-weight: 400!important;
	font-size: 0.6em;
}
.attention_red {
	padding: 10px;
	font-size: 13px;
}
.plan_box {
	padding: 10px;
	margin: 20px auto;
}
.plan_box .lead_tx {
	padding-top: 0;
}
.attention {
	margin-top: 20px!important;
	font-size: 11px;
}
.tab_inner.entry .content_img {
	width: 100%;
}
}