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

/* PCBank光CSS */

/* ヘッダーここから */
.header-pc h2 {
	color: #fff;
	position: absolute;
	top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    -webkit-transform: translate(-50%, -50%);
    -ms-transform: translate(-50%, -50%);
}

/* ヘッダーここまで */

/* メインここから */
/* PCBank光の特徴 */
#pcbankhikari-detail {
	padding: 150px 0 0 0;
}

#pcbankhikari-features {
	background-color: #DEF2FB;
	width: 70%;
	margin: 0 auto 10% auto;
	box-shadow: rgba(100, 100, 111, 0.2) 0px 7px 29px 0px;
	padding: 100px 0;
	position: relative;
}

#pcbankhikari-features .h3-box {
	padding-top: 0px;
}

/* ポイント1 */
.point-1 {
	display: flex;
	width: 60%;
	background-color: #fff;
	box-shadow: rgba(0, 0, 0, 0.02) 0px 1px 3px 0px, rgba(27, 31, 35, 0.15) 0px 0px 0px 1px;
	padding: 5rem;
    margin: 0 auto;
    color: #f2f2f2;
	margin-bottom: 100px;
}

/* 縦ライン */
.point-1 figure {
	width: 15%; /* 幅を指定 */
	position: relative;
	margin-right: 5em; /* AとBの余白 */
}

.point-1 figure::after {
	position: absolute;
	top: 0;
	left: 100%;
	margin: 0 2rem;
	content: "";
	width: 1px; /* 縦線の太さ(幅) */
	height: 100%;
	background-color: #333; /* 縦線の色 */
}

.point-1 .point-1-text-box {
	width: 80%; /* 幅を指定 */
}

.point-1-title {
	color: #29abea;
	font-size: 20px;
	font-weight: bold;
	margin-bottom: 10px;
}

.point-1-text {
	line-height: 2.0;
}

/* ポイント2 */
.point-2 {
	display: flex;
	align-items: center;
	width: 60%;
	background-color: #fff;
	box-shadow: rgba(0, 0, 0, 0.02) 0px 1px 3px 0px, rgba(27, 31, 35, 0.15) 0px 0px 0px 1px;
	padding: 3rem 5rem;
    margin: 0 auto;
    color: #f2f2f2;
	margin-bottom: 100px;
}

/* 縦ライン */
.point-2 figure {
	width: 15%; /* 幅を指定 */
	position: relative;
	margin-right: 5em; /* AとBの余白 */
}

.point-2 figure::after {
	position: absolute;
	top: 0;
	left: 100%;
	margin: 0 2rem;
	content: "";
	width: 1px; /* 縦線の太さ(幅) */
	height: 100%;
	background-color: #333; /* 縦線の色 */
}

.point-2 .point-2-text-box {
	width: 80%; /* 幅を指定 */
}

.point-2-title {
	color: #29abea;
	font-size: 20px;
	font-weight: bold;
	margin-bottom: 10px;
}

/* ポイント3 */
.point-3 {
	display: flex;
	align-items: center;
	width: 60%;
	background-color: #fff;
	box-shadow: rgba(0, 0, 0, 0.02) 0px 1px 3px 0px, rgba(27, 31, 35, 0.15) 0px 0px 0px 1px;
	padding: 3rem 5rem;
    margin: 0 auto;
    color: #f2f2f2;
	margin-bottom: 100px;
}

/* 縦ライン */
.point-3 figure {
	width: 15%; /* 幅を指定 */
	position: relative;
	margin-right: 5em; /* AとBの余白 */
}

.point-3 figure::after {
	position: absolute;
	top: 0;
	left: 100%;
	margin: 0 2rem;
	content: "";
	width: 1px; /* 縦線の太さ(幅) */
	height: 100%;
	background-color: #333; /* 縦線の色 */
}

.point-3 .point-3-text-box {
	width: 80%; /* 幅を指定 */
}

.point-3-title {
	color: #29abea;
	font-size: 20px;
	font-weight: bold;
	margin-bottom: 10px;
}

/* 背景 */
#worries {
	background-image: url("../img/bg_worries.jpg");
	background-repeat: no-repeat;
	background-position: bottom;
	background-size: cover;
	padding: 10% 0;
	position: relative;
}

/* こんなお悩みありませんか？ */
/* 囲み枠 */
.worries-box {
    position: relative;
	width: 50%;
	margin: 0 auto;
    padding: 3rem 3rem 1rem 3rem;
    border: solid 3px #29abea;
	background-color: rgba(255,255,255,0.8);
	box-shadow: rgba(100, 100, 111, 0.2) 0px 7px 29px 0px;
	margin-bottom: 100px;
}

.worries-title {
    position: absolute;
    display: inline-block;
    top: -27px;
    left: -3px;
    padding: 0 12px;
    height: 25px;
    line-height: 25px;
    font-size: 20px;
    background: #29abea;
    color: #ffffff;
    font-weight: bold;
}

.worries-box-top {
	display: flex;
	align-items: center;
	gap: 5%;
	margin-bottom: 25px;
}

.worries-box-top figure {
	width: 10%;
}

.horizontal-line {
	border-bottom: 1px solid #DFDEDC;
	opacity: 0.5;
	margin-bottom: 25px;
}

.worries-box-bottom {
	display: flex;
	align-items: center;
	gap: 5%;
	margin-bottom: 25px;
}

.check-1 {
	width: 12%;
}

.check-2 {
	width: 8%;
}

.check-3 {
	width: 16%;
}

.worries-box-bottom p {
	line-height: 2;
}

.solution-box {
	display: flex;
	justify-content: center;
	align-items: center;
	gap: 5%;
}

.solution-img {
	width: 20%;
}

.solution-box-s {
	width: 25%;
}

.solution-box-s figure {
	width: 20%;
	margin: 0 auto 10px auto;
}

.solution-title {
	color: #80E7F2;
	font-size: 20px;
	font-weight: 500px;
	margin-bottom: 25px;
}

.solution-text {
	color: #fff;
	line-height: 2.0;
}

/* 手続きの流れ */
#procedure .h3-box {
	margin-top: 100px;
}

#change-flow {
	background-color: #DEF2FB;
	width: 70%;
	margin: 5% auto 10% auto;
	box-shadow: rgba(100, 100, 111, 0.2) 0px 7px 29px 0px;
	padding: 100px 0;
}

#new-flow {
	background-color: #DEF2FB;
	padding: 10% 0;
}

#new-flow .bg-white {
	background-color: #fff;
    width: 70%;
    margin: 0 auto;
    box-shadow: rgba(100, 100, 111, 0.2) 0px 7px 29px 0px;
	padding: 100px 0;
}

#procedure .h4-box {
	width: 70%;
	margin: 0 auto 50px auto;
}


/* 乗り換えの手続きの流れ */
.change-flow-box {
	width: 70%;
	margin: 0 auto;
  	padding-top: 30px;
  	padding-bottom: 30px;
 	display: flex;
	justify-content: center;
	gap: 10%;
}

.change-flow-icon {
  	position: relative;
  	margin-right: 40px;
  	border-radius: 50%;
  	width: 150px;
  	height: 150px;
  	line-height: 80px;
  	text-align: center;
  	background: #29abea;
  	color: #fff;
  	font-size: 36px;
	padding: 2.5rem;
}

.change-flow-icon img {
	position: relative;
	z-index: 2;
}

.change-flow-icon-line {
  	position: absolute;
  	top: -20%;
  	left: 50%;
  	transform: translate(-50%,-50%);
  	width: 4px;
  	height: 66px;
  	background: #29abea;
	z-index: 1;
}

/* アイコンライン ロング */
.long {
	top: -215%;
	height: 785px;
}

/* アイコンライン ショート */
.short {
	top: -41%;
	height: 160px;
}


.change-flow-box-s {
	width: 70%;
}

.change-flow-title-box {
	display: flex;
	gap: 2%;
	margin-top: 5%;
	margin-bottom: 25px;
}

.change-flow-title-box figure {
	width: 12%;
}

.change-flow-title {
  	margin-right: 48px;
  	flex-basis: 298px;
  	color: #29abea;
  	font-size: 20px;
	font-weight: 500;
}

.change-flow-text {
  	line-height: 1.5;
  	font-size: 16px;
	margin-bottom: 50px;
}

/* NTT西日本表 */
.ntt-list {
	width: 70%;
	border: 1px solid #333;
}

.ntt-list-title {
	font-size: 24px;
	font-weight: 500;
	border-bottom: 1px solid #333;
	padding: 0.5rem;
}

.ntt-list dt {
	padding: 0.5rem;
}

.ntt-list dd {
	padding: 0.5rem;
}

.ntt-list dd:nth-child(-n+3) {
	border-bottom: 1px solid #333;
}

.ntt-list a {
	color: #29abea;
}

.ntt-list a:hover {
	color: #80E7F2;
}

/* 重要事項ご説明一覧 */
/* 背景 */
#disclosure-statement {
	background-image: -webkit-linear-gradient(left, #F4F4F4 4%, #DFDEDC 99%);
	background-image: linear-gradient(to right, #F4F4F4 4%, #DFDEDC 99%);
	padding: 100px 0 200px 0;
}

#disclosure-statement .bg-white {
	background-color: #fff;
    width: 70%;
    margin: 0 auto;
    box-shadow: rgba(100, 100, 111, 0.2) 0px 7px 29px 0px;
	padding: 100px 0;
}

.disclosure-statement-box {
	display: flex;
	flex-wrap: wrap;
	gap: 20%;
	width: 70%;
	margin: 0 auto;
}

.disclosure-statement-box p {
	width: 40%;
	margin-bottom: 50px;
}

.disclosure-statement-box p::before {
	content: url("../img/disclosure_statement_icon.png");
	margin-right:20px;
}

.disclosure-statement-box a:hover {
	color: #80E7F2;
}
/* メインここまで */



/* 画面幅1180px以下 */
@media screen and (max-width:1180px) {
	
	/* PCBank光の特徴 */
	#pcbankhikari-features {
		width: 90%;
	}
	
	.point-1,
	.point-2,
	.point-3 {
		width: 80%;
	}
	
	/* こんなお悩みありませんか？ */
	.worries-box {
		width: 80%;
	}
	
	.solution-box {
		width: 80%;
		margin: 0 auto;
	}
	
	.solution-img {
		width: 25%;
	}
	
	.solution-box-s {
		width: 60%;
	}
	
	/* お手続きの流れ */
	/* 転用（乗り換え） */
	#change-flow {
		width: 90%;
	}
	
	.change-flow-box {
    	width: 80%;
	}
	
	.ntt-list {
		width: 100%;
	}
	
	/* 新規 */
	#new-flow .bg-white {
		width: 90%;
	}
	
	/* 重要事項ご説明一覧 */
	#disclosure-statement .bg-white {
		width: 90%;
		padding: 1px 0;
	}
	
	.disclosure-statement-box {
		display: block;
		width: 40%;
	}
	
	.disclosure-statement-box p {
		width: 100%;
		margin: 0 auto 50px 0;
	}
}


/* 画面幅767px以下 */
@media screen and (max-width:767px) {
	/* ヘッダーここまで */
	
	/* メインここから */
	.h2-pcbankhikari::before {
		font-size: 40px;
		line-height: 0.8;
		top: -15%;
	}
	
	/* PCBank光の特徴 */
	#pcbankhikari-detail {
		padding: 0;
	}
	
	#pcbankhikari-features {
		width: 90%;
		margin: 2rem 1rem;
		padding: 2rem 0 1rem 0;
	}
	
	.point-1,
	.point-2,
	.point-3 {
		display: block;
		width: 90%;
		padding: 2rem 1rem;
		margin: 0 auto;
		color: #f2f2f2;
		margin: 2rem 1rem;
	}
	
	.point-1 figure,
	.point-2 figure,
	.point-3 figure {
		width: 30%;
		margin: 0 auto;
	}
	
	.point-1 figure::after {
		display: none;
	}
	
	.point-2 figure::after {
		display: none;
	}
	
	.point-3 figure::after {
		display: none;
	}
	
	.point-1 .point-1-text-box,
	.point-2 .point-2-text-box,
	.point-3 .point-3-text-box {
		width: 100%;
	}
	
	/* こんなお悩みありませんか */
	#worries {
		padding: 4rem 1rem 2rem 1rem;
	}
	
	.worries-title {
		font-size: 18px;
	}
	
	.worries-box {
		background-color: rgba(255, 255, 255, 0.6);
		width: 100%;
		margin-bottom: 2rem;
		padding: 1rem;
	}
	
	.worries-box-top {
		display: block;
		margin-bottom: 1rem;
	}
	
	.worries-box-top figure {
		width: 15%;
		margin: 0 auto;
	}
	
	.horizontal-line {
		margin-bottom: 10px;
	}
	
	.worries-box-bottom {
		display: block;
		margin-bottom: 50px;
	}
	
	.worries-box-bottom figure {
		width: 15%;
		margin: 0 auto;
	}
	
	.solution-box {
		display: none;
	}
	
	.solution-box-s-sp {
		display: flex;
		align-items: center;
		gap: 5%;
		width: 80%;
		margin: 0 auto 2rem auto;
	}
	
	.solution-img {
		width: 65%;
	}
	.arrow-solution {
		width: 30%;
	}
	
	.solution-title {
		font-size: 18px;
		margin-bottom: 1rem;
	}
	
	/* 手続きの流れ */
	/* 転用のご契約 */
	#procedure .h3-box {
		margin-top: 0;
		padding-top: 0;
	}
	
	#change-flow {
		width: 91%;
		margin: 2rem 1rem;
		padding: 2rem 1rem 1rem 1rem;
	}
	
	#procedure .h4-box {
		width: 100%;
		margin-bottom: 2rem;
	}
	
	.change-flow-box {
		width: 100%;
		margin: 0 auto 2rem auto;
		padding-top: 0;
		padding-bottom: 0;
		display: block;
	}
	
	.change-flow-box-s {
		width: 100%;
	}
	
	.change-flow-icon {
		height: 100px;
		width: 100px;
		padding: 1.5rem;
		margin: 0 auto;
	}
	
	.change-flow-icon-line {
		display: none;
	}
	
	.change-flow-title-box {
		margin-bottom: 1rem;
	}
	
	.change-flow-title-box figure {
		width: 35%;
	}
	
	.change-flow-title {
		font-size: 18px;
	}
	
	.change-flow-text {
		margin-bottom: 1rem;
	}
	
	.ntt-list {
		width: 100%;
	}
	
	/* 新規のご契約 */
	#new-flow {
		padding: 2rem 1rem;
	}
	
	#new-flow .bg-white {
		background-color: #fff;
		width: 100%;
		margin: 0 auto;
		box-shadow: rgba(100, 100, 111, 0.2) 0px 7px 29px 0px;
		padding: 2rem 1rem;
	}
	
	/* 重要事項ご説明一覧 */
	#disclosure-statement {
		padding: 2rem 1rem;
	}
	
	#disclosure-statement .bg-white {
		width: 100%;
		margin: 0 auto;
		padding: 0;
	}
	
	#disclosure-statement .h3-box {
		padding-top: 2rem;
	}
	
	.disclosure-statement-box {
		display: block;
		width: 91%;
		margin: 0 1rem;
		padding-bottom: 2rem;
	}
	
	.disclosure-statement-box p::before {
		margin-right: 5px;
	}

	.disclosure-statement-box p {
		width: 100%;
		margin-bottom: 2rem;
		font-size: 3.8vw;
	}
	
	/* メインここまで */
	
	/* フッターここから */
	/* フッターここまで */
}