@charset "UTF-8";

/* ==========================================================================
   lineup
   ========================================================================== */


/*--------------------------------------------------
	＜レイアウト＞
--------------------------------------------------*/
@media screen and (min-width: 641px) {
	body {
		overflow-x: hidden;
	}
}

.cover {
	width: 100%;
}

.container {
	position: relative;
	text-align: center;
	overflow-x: hidden;
}

.wrap {
	margin: 0 auto;
	text-align: left;
}
@media screen and (min-width: 641px) {
	.wrap {
		width: 960px;
	}
	.ie8 .wrap {
		width: 980px;
	}
	.wrap h2,
	.wrap h3,
	.wrap .items {
		padding: 0 10px;
	}
}
@media screen and (max-width: 640px) {
	.wrap {
		width: 95%;
	}
}

.nav {
	margin: 2.5em 0 0;
}
.nav ul {
	display: table;
	table-layout: fixed;
}
@media screen and (min-width: 641px) {
	.nav ul {
		padding: 0 10px;
		width: 940px;
	}
}
@media screen and (max-width: 640px) {
	.nav ul {
		margin: 0 auto;
		width: 100%;
	}
}
.nav li {
	display: table-cell;
	border-collapse: collapse;
	text-align: center;
	vertical-align: middle;
}
@media screen and (min-width: 641px) {
	.nav li {
		border-bottom: 1px solid #ccc;
	}
	.nav li a {
		position: relative;
		display: block;
		margin: 0 auto;
		padding: 0.8em 0;
		width: 98%;
		text-align: center;
		line-height: 1;
		background-color: #f5f5f5;
		font-size: 0.9em;
		color: #2e2e2e;
		transition: background-color 0.3s;
	}
	.nav li.current a,
	.nav li a:hover {
		background-color: #fff;
		color: #2e2e2e;
		border: 1px solid #ccc;
		border-bottom: none;
	}
	.nav li.current a:after {
		content: '';
		position: absolute;
		left: 0;
		bottom: -1px;
		width: 100%;
		height: 1px;
		background-color: #fff;
	}
/*
	.nav li a:hover {
		background-color: #ddd;
	}
*/
	.nav li.current a {
		width: 96%;
	}
	.nav li.current a:hover {
		background-color: #fff;
		cursor: default;
	}
}
@media screen and (max-width: 640px) {
	.nav li {
		border: 1px solid #fff;
		padding: 0.6em 0;
		width: 100%;
		height: 2.2em;
		vertical-align: middle;
		background-color: #f5f5f5;
		font-size: 0.8em;
		line-height: 1.2;
	}
	.nav li.current {
		border: 1px solid #ccc;
		background-color: #fff;
	}
}

.items {
	text-align: left;
	font-size: 0;
}
.items a,
.items div {
	position: relative;
	display: inline-block;
	width: 220px;
	height: 310px;
	border-radius: 4px;
	vertical-align: top;
	transition: all 0.3s;
	text-decoration: none;
}
@media screen and (min-width: 641px) {
    .items {margin-right: -20px;}
    .items a {
		margin-right: 20px;
		margin-bottom: 36px;
	}
	/*.items a:nth-child(4n) {
		margin-right: 0;
	}*/
	.items a:hover {
		background-color: #f5f5f5;
	}
	.items a.no-link:hover {
		background-color: #fff;
	}
}
@media screen and (max-width: 640px) {
	.items a {
		width: 50%;
	}
    .items h4 {
		text-align: center;
	}

}

@media screen and (min-width: 641px) {
	.list {
		display: inline-block;
		width: 187px;
		text-align: center;
		vertical-align: top;
		font-size: 0;
	}
}
@media screen and (max-width: 640px) {
	.list {
		text-align: left;
	}
	.list.noitem {
		margin-bottom: 4em;
	}
}

.list h4 {
	display: block;
	margin: 2em 0;
	font-size: 1rem;
	font-weight: bold;
	line-height: 1;
}
@media screen and (min-width: 641px) {
	.list h4 {
		border-right: 1px solid #acacac;
	}
	.wrap div:nth-of-type(6) h4 {
		border-right: none;
	}
}
.list h4 small {
	font-size: 0.9rem;
}

.list p {
	padding: 2em 0;
	width: 100%;
	height: 2.6em;
	font-size: 0.9rem;
	line-height: 1.3;
	border-bottom: 1px solid #f5f5f5;
}
@media screen and (max-width: 640px) {
	.list h4 {
		font-size: 1.1rem;
		margin-bottom: 0.5em;
	}
	.list p {
		padding: 1.5em 0;
		height: 1em;
		line-height: 1;
	}
	.list p.empty {
		display: none;
	}
}
@media screen and (min-width: 641px) {
	.list a {
		transition: all 0.3s;
	}
	.list a:hover {
		color: #919191;
		text-decoration: underline;
	}
	span.br::after {
		content: "";
		display: block;
	}
}

.others h3 {
	margin: 4em 0 2em;
	font-size: 1.35rem
}

@media screen and (min-width: 641px) {
	.others .btn {
		margin-right: 20px;
		text-align: center;
	}
	.others .btn:nth-child(5n) {
		margin-right: 0;
	}
	.others .btn span {
		line-height: 1.4;
	}
	.others .btn strong  {
		display: block;
	}
}
@media screen and (max-width: 640px) {
	.others .btn {
		margin-bottom: 1em;
		width: 92%;
	}
	.others .btn span {
		width: 100%;
	}
}

.other-lineup {
	margin-top: 4em;
	padding: 1.6em 0;
	background: #f5f5f5;
}


/*--------------------------------------------------
	＜テキスト・エレメント＞
--------------------------------------------------*/
h2 {
	margin-top: 1em;
	font-size: 2.5rem;
	font-weight: 300;
	line-height: 1.5;
	text-align: left;
}

h3 {
	font-size: 1.5rem;
	font-weight: 300;
	line-height: 1;
	text-align: left;
}

p.carrier {
	padding: 0.4em 0;
	text-align: center;
	font-size: 0.9rem;
	font-weight: bold;
	line-height: 1;
}

p.release {
	padding: 0.3em 0;
	text-align: center;
	font-size: 0.875rem;
	font-weight: 300;
	line-height: 1.3;
	color: #616161;

}
@media screen and (max-width: 640px) {
	p.release {
		font-size: 0.85rem;
	}
}

p.new {
	position: absolute;
	display: block;
	top: 0;
	right: 0;
	width: 35px;
	height: 36px;
	background: url("../images/icon_new.png") right top no-repeat;
	overflow: hidden;
	white-space: nowrap;
	text-indent: 100%;
}

.btn {
	display: inline-block;
	padding: 12px;
	border: 1px solid #2e2e2e;
	border-radius: 2px;
	line-height: 1;
	font-size: 0.8rem;
	transition: all 0.3s;
}
.btn span {
	display: inline-block;
	width: 194px;
	background: url(/k-tai/common_v3/images/icon_arrow_bk_2x.png) center right no-repeat;
	background-size: 0.5em;
}
.ie8 .btn span {
	background-image: url(/products/k-tai_d_common_v3/images/icon_arrow_bk.png);
}
@media screen and (min-width: 641px) {
	.btn:hover {
		color: #fff;
		border-color: #666;
		background-color: #666;
	}
}

.nv_pagetop {
	position: absolute;
}


/*--------------------------------------------------
	＜パンくずリスト＞
--------------------------------------------------*/
@media screen and (min-width: 641px) {
	.breadcrumb-nav {
	}
	.breadcrumb-nav p {
		margin: 0 auto;
		padding: 15px 10px;
		width: 940px;
		text-align: left;
		color: #2f2f2f;
		font-size: 0.7rem;
		font-weight: 300;
	}
	.breadcrumb-nav p a {
		color: #2f2f2f;
		text-decoration: none;
		transition-property: color;
		transition-duration: 0.15s;
		transition-timing-function: ease-in-out;
	}
	.breadcrumb-nav p a:hover {
		color: #ff6800;
	}
}

@media screen and (max-width: 640px) {
	.breadcrumb-nav {}
	.breadcrumb-nav p {
		padding: 1em;
		text-align: left;
		color: #2f2f2f;
		font-size: 0.5rem;
		line-height: 1.4;
	}
	.breadcrumb-nav p a {
		color: #2f2f2f;
		text-decoration: underline;
	}
}


/*--------------------------------------------------
	＜ブラウザ出し分け＞
--------------------------------------------------*/
@media screen and (min-width: 641px) {
	.forSP {
		display: none !important;
	}
}

@media screen and (max-width: 640px) {
	.forPC {
		display: none !important;
	}
	.forSP {
		display: block !important;
	}
}

.forIE8 {
	display: none;
	display: block\9; /* IE10以下 */
}
html>/**/body .forIE8 {
	display /*\**/: block \9;
}
.forIE8:not(:target) {
	display: none; /* IE9, 10, 11 */
}

.forIE8no {
	display: none\9; /* IE10以下 */
}
.forIE8no:not(:target) {
	display: block\9; /* IE9, 10 */
}

:root .forIE9 { display:block!important\0/;}


/*--------------------------------------------------
	＜SP＞
--------------------------------------------------*/
@media screen and (max-width: 640px) {
	.container,
	img {
		max-width: 100%;
	}
	.container h2 {
		font-size: 1.6rem;
	}
	.container h3 {
		font-size: 1.46rem;
		font-weight: 300;
	}
	.btn {
		width: 16em;
	}
}

/*--------------------------------------------------
	過去のデータ（アコーディオン）
--------------------------------------------------*/
@media screen and (min-width: 641px) {
	.list > *:last-child p, .list > p:last-child {
		border:none;
	}
	.container .past_data > div div.list:last-child h4 {
		border-right:none;
	}
	.container .archive_o h4 {
		border-right:none;
	}
}
.container .past_data {
	margin-top:3em;
	}
.container .past_data h3 {
	border:1px solid #dfdfdf;
	border-radius:4px;
	padding:10px;
	cursor:pointer;
	background:url("../../common_v3/images/icon_accordion_close.gif") no-repeat 10px 50%;
	padding-left:40px;
}
.container .past_data h3.open{
	background:url("../../common_v3/images/icon_accordion_open.gif") no-repeat 10px 50%;
}
@media screen and (max-width: 640px) {
	.list.noitem {
		display:none;
	}
	.container .past_data > div .list:first-child h4 {
		margin-top:0;
	}
}

/*--------------------------------------------------
	＜キャリアナビ＞
--------------------------------------------------*/
.carrier_nav {
    display:flex;
    justify-content: center;
    flex-wrap: wrap;
    margin:3em auto 0;
}
.carrier_nav li {
    padding:0.5em 1em;
    border-bottom:1px solid #aaa;
    cursor: pointer;
	margin:0 3px;
}
.carrier_nav li:hover:not(.active){
    /*color:#ff6800;*/
	background: #fafafa;
}
.carrier_nav li.active {
    border-bottom-width: 4px;
    cursor:default;
    pointer-events:none;
	background: #f5f5f5;
}
@media screen and (max-width: 640px) {
    .carrier_nav li {
        width:22.5%;
        padding:0.5em 0;
        font-size: 13px;
        text-align: center;
		margin-bottom:6px;
        height: 36px;
    	box-sizing: border-box;
    }
}

/*--------------------------------------------------
	＜料金プラン絞り込みナビ＞
--------------------------------------------------*/
.plan_nav {
	display:flex;
	justify-content: center;
	margin:4em auto 4em;
}
.carrier_nav + .plan_nav {
	margin:3em auto 4em;
}
.plan_nav li {
	border:1px solid #999;
	border-radius:16px;
	padding:2px 1.5em;
	margin:0 0.5em;
	cursor: pointer;
	transition: 0.2s
}
.plan_nav li {
	position:relative;
}


@media screen and (min-width: 641px) {
	.plan_nav li:hover{
		background: #bbb;
		border-color:#bbb;
		color:#FFF;
	}
	.plan_nav li.active{
		background: #777;
		border-color:#777;
		color:#FFF;
	}
}
@media screen and (max-width: 640px) {
	.plan_nav li {
		font-size: 13px;
		padding: 5px 1em;
	}
	.plan_nav li.active{
		background: #777;
		border-color:#777;
		color:#FFF;
	}
}
/*--------------------------------------------------
	＜料金プラン表示時のアーカイブデータ＞
--------------------------------------------------*/
.plan_archive {
	display:flex;
	flex-wrap: wrap;
	margin-top:2em;
	padding:0;
}
.plan_archive.noview {
	display:none;
}
.plan_archive .plan{
	width:220px;
	margin:0 10px 40px;
}

.plan_archive .plan h4 {
	font-size:0.9rem;
	margin:0 0 15px 0 ;
}
.plan_archive .plan li {
	margin-top: 1em;
    line-height: 1.4;
	font-size:14px;
}
.plan_archive .notes {
	width:100%;
	margin-top:20px;
}
.plan_archive .notes li{
	margin-top: 0.5em;
    font-size: 12px;
    line-height: 1.5;
	text-align:left;
}

.plan_archive .notes .em_num li {
	padding-left: 1.8em !important;
    text-indent: -1.8em !important;
}
.plan_archive .notes .em_space li {
	padding-left: 1.2em !important;
    text-indent: -1.2em !important;
}
.plan_archive .bnr {
	width:100%;
	text-align: center;
}

@media screen and (max-width: 640px) {
	.plan_archive {
		display:block;
		margin-top:20px;
	}
	.plan_archive .plan{
		width:auto;
		margin-right:0;
	}
	.plan_archive .plan ul{
		margin-left:1em
	}
}
.ahamo_note,.linemo_note,.povo_note{
	display:none;
	top:0;
}
/*--------------------------------------------------
	フッターバナーエリア
--------------------------------------------------*/
.footer_bnr {
	padding:40px 0 20px;
}
.footer_bnr ul {
	display: flex;
	flex-wrap: wrap;
	max-width: 960px;
	margin:0 auto;
	justify-content: space-around;
}
.footer_bnr ul li{
	width:460px;
	margin-bottom: 20px;
}
.footer_bnr ul li img{
	width:100%;
}
@media screen and (max-width: 640px) {
	.footer_bnr ul {
		display:block
	}
	.footer_bnr ul li{
		width:90%;
		max-width:460px;
		margin:0 auto 20px;
	
	}
}
/*--------------------------------------------------
	＜ページ下部追従型製品比較導線＞
--------------------------------------------------*/
.compare_fixed {
	position: fixed;
	bottom:15px;
	right:0;
	width:170px;
	height:50px;
	transition: 0.3s cubic-bezier(0.9, 0.33, 1, 1);
	margin:0;
}
.compare_fixed.close {
	right: -118px;
}
.compare_fixed .lnk_compare {
	display: block;
	height:35px;
	background: rgba(0, 34, 194, 0.7) url("/k-tai/lineup/images/icon_compare.png") no-repeat 3px 3px;
	background-size: 44px;
	color:#fff;
	border-bottom-left-radius: 25px;
	border-top-left-radius: 25px;
	padding-left:53px;
	font-size:15px;
	line-height: 18px;
	padding-top:15px;
	text-decoration: none;
}

.compare_fixed .btn_compare {
	position:absolute;
	right:10px;
	top:5px;
	width:16px;
	height:16px;
	background-color: #fff;
	border-radius: 2px;
}

.compare_fixed .btn_compare::after {
	content: "";
	position: absolute;
	left: 3px;
	top: 7px;
	width: 10px;
	height: 2px;
	background-color: #4c64d4;

}
@media screen and (min-width: 641px) {
	.compare_fixed .lnk_compare:hover {
		text-decoration: underline;
	}
	.compare_fixed .btn_compare {
		cursor: pointer;
	}
}
@media screen and (max-width: 640px) {
	.compare_fixed .lnk_compare {
		text-decoration: none;
	}
}
.nv_pagetop a {
	bottom: 70px;
}