@charset "UTF-8";

ul.ex_nav_a {display: flex; justify-content: center; gap: 10px; flex-wrap: nowrap; list-style: none; margin: 3em auto 1em; padding: 0;}
ul.ex_nav_a li {margin: 0; width: 100%; text-align: center; font-size: 3.5vw; position: relative;}
ul.ex_nav_a li.is_active::after,
ul.ex_nav_a li.is_active::before {content: ""; position: absolute; left: 50%; bottom: -13px; border: solid; border-width: 13px 13px 0 13px; margin-left: -13px; border-color: #0092F0 transparent;}
ul.ex_nav_a li.is_active::before {content: ""; bottom: -9px; border-top-color: #fff; z-index: 1;}
ul.ex_nav_a li span.ex_img {width: 60%; max-width: 120px; margin-bottom: 10px;}
ul.ex_nav_a li > a,
ul.ex_nav_a li > .ex_item {display: flex; justify-content: center; align-items: center; flex-direction: column; border: solid 3px #0092F0; border-radius: 10px; overflow: hidden; text-decoration: none; height: 100%; position: relative; color: inherit; padding: 1em;}
ul.ex_nav_a li.mn > .ex_item {border-color: #009d3c;}
ul.ex_nav_a li.fm.is_active > .ex_item {background-color: #cce9fc;}
ul.ex_nav_a li.mn.is_active > .ex_item,
ul.ex_nav_a li.mn:hover > .ex_item {background-color: #e1f3e8; transition: 0.3s;}
ul.ex_nav_a li.fm.is_active::before {border-top-color: #cce9fc;}
ul.ex_nav_a li.mn.is_active::before {border-top-color: #e1f3e8;}
ul.ex_nav_a li.mn.is_active::after {border-top-color: #009d3c;}

@media only screen and (min-width: 640px) {
	ul.ex_nav_a {gap: 4%;}
	ul.ex_nav_a li {font-size: inherit; max-width: 450px;}
	ul.ex_nav_a li span.ex_img {max-width: 100px; margin: 0;}
	ul.ex_nav_a li a,
	ul.ex_nav_a li .ex_item {flex-direction: row; padding-right: 10%;}
}

@media only screen and (max-width: 639px) {
	.ex_anc_wrap {padding-top: 0;}
}

.fm .ex_anc_wrap {background: repeating-linear-gradient(135deg, #e1f2fd 0, #e1f2fd 5px, #d9effd 5px, #d9effd 7px);}
.mn .ex_anc_wrap {background: repeating-linear-gradient(135deg, #e1f3e8 0, #e1f3e8 5px, #d9f0e2 5px, #d9f0e2 7px);}

ul.ex_anc_a {border: solid 2px #0092F0; border-radius: 8px; padding: 0; list-style: none; line-height: 1.3; overflow: hidden;}
ul.ex_anc_a li {border-bottom: solid 1px #0092F0; margin: 0;}
ul.ex_anc_a li a {min-height: 3.5em; display: flex; align-items: center; text-decoration: none; color: inherit; background: no-repeat; background-size: 40px; background-position: top 11px left 10px; padding-left: 65px; padding-right: 10px; background-color: #fff;}
ul.ex_anc_a li a:hover {color: #0092F0; transition: 0.3s;}

@media only screen and (min-width: 640px) {
	ul.ex_anc_a {display: flex; border: none; gap: 20px; overflow: visible;}
	ul.ex_anc_a li {width: 100%; border: none;}
	ul.ex_anc_a li a {border-radius: 6px; border: solid 2px #0092F0; min-height: 4em; background-size: 48px; background-position: top 11px left 12px; padding-left: 75px;}
	ul.ex_anc_a li a:hover {transform: scale(1.05);}
    ul.ex_anc_a li a::after {
        content: '▼';
        font-size: 70%;
        margin: 0 0 0 auto;
    }
    .fm ul.ex_anc_a li a::after { color: #0092f0;}
    .mn ul.ex_anc_a li a::after { color: #009d3c;}
}

.ex_h2_wrap {margin-top: 60px;}
h2.ex_ribbon {min-width: 300px; max-width: 374px; font-size: 1.8rem; color: #fff; clip-path: polygon(100% 0, calc(100% - 10px) 50%, 100% 100%, 0% 100%, 0 0); padding: 3px 0; margin: 0 0 0 -20px;}
h2.ex_ribbon > span { width: 100%; margin: 0; padding: 0em 1.5em 0 1em; border-style: solid; border-width: 2px 0; height: 54px; line-height: 1; display: flex; align-items: center;}
.fm h2.ex_ribbon { background: #0092f0;}
.fm h2.ex_ribbon > span {	border-color: #66bef6;}
.mn h2.ex_ribbon { background: #009d3c;}
.mn h2.ex_ribbon > span { border-color: #66c48a;}

h2.ex_ribbon > span > img {	margin: 0 .75em 0 0;}

@media only screen and (min-width: 1000px) {
	.ex_h2_wrap {display: flex; align-items: center;}
	.ex_h2_wrap p {margin: 0; line-height: normal;}
}
@media only screen and (min-width: 640px) {
	h2.ex_ribbon { width: 475px; max-width: none; font-size: 2.4rem; margin: 0 20px 0 0;}
}

table.ex_plan h3 {color: #002673; font-size: 120%; text-align: center; font-feature-settings: "palt"; letter-spacing: 0.05em; margin-bottom: 10px;}
table.ex_plan h3 b {display: inline-block; background: linear-gradient(transparent 60%, #fbe380 60%, #fbe380 80%, transparent 90%);}
table.ex_plan h4 {display: flex; justify-content: center; align-items: center; gap: 10px; text-align: left;}
table.ex_plan h4 span:first-child {max-width: 84px;}
table.ex_plan .ff_din {font-size: 140%;}

.fm table.ex_plan tr.ex_thead th {background: repeating-linear-gradient(135deg, #e1f2fd 0, #e1f2fd 5px, #d9effd 5px, #d9effd 7px); border-bottom-width: 0;}
.mn table.ex_plan tr.ex_thead th {background: repeating-linear-gradient(135deg, #e1f3e8 0, #e1f3e8 5px, #d9f0e2 5px, #d9f0e2 7px); border-bottom-width: 0;}

table.ex_plan tbody td:nth-child(2),
table.ex_plan tbody td:nth-child(3),
table.ex_plan tbody td:nth-child(4) {text-align: center;}
table.ex_plan tbody td:nth-child(4) {position: relative;}
a.ex_icon_waribiki {line-height: 1; border: solid 1px #0092f0; color: #0092f0; position: static; text-decoration: none; padding: 4px 6px 3px; font-size: 90%; border-radius: 4px; top: 12px; right: 12px;}
a.ex_icon_waribiki::after {content: "▼"; font-size: 70%; vertical-align: 0.1em; margin-left: 0.3em;}
a.ex_icon_waribiki:hover {background-color: #0092f0; color: #fff; transition: 0.2s;}

@media only screen and (min-width: 640px) {
	table.ex_plan h3 {font-size: 130%;}
	table.ex_plan {margin-top: 40px;}
	table.ex_plan tbody td:nth-child(1) {grid-column: 1 / 3; grid-row: 1}
	table.ex_plan tbody td:nth-child(2) {grid-column: 1 / 2; grid-row: 2}
	table.ex_plan tbody td:nth-child(3) {grid-column: 2 / 3; grid-row: 2}
	table.ex_plan tbody td:nth-child(4) {grid-column: 1 / 3; grid-row: 3}
}

@media only screen and (max-width: 999px) {
	table.ex_plan {border: none; display: block;}
	table.ex_plan thead {display: none;}

	table.ex_plan tbody {display: block; margin: 2em 0; padding: 1em; border-style: solid; border-width: 1px 0 0 1px; border-collapse: separate; border-spacing: 0; border-radius: 6px; overflow: hidden;}
	.fm table.ex_plan tbody {box-shadow: 3px 3px 0 0 #4cb2f4; border-color: #7fc8f7;}
	.mn table.ex_plan tbody {box-shadow: 3px 3px 0 0 #4cba76; border-color: #7fce9d;}

	table.ex_plan tbody tr {display: block; display: grid; gap: 15px;}
	table.ex_plan tbody td {padding: 0; border: none; display: block; padding-bottom: 1em;}

	table.ex_plan tbody td::before {content: ""; display: block; margin-bottom: 1em; padding: 0.5em; border-radius: 6px; font-weight: bold; text-align: center; border-bottom-width: 0;}
	.fm table.ex_plan tbody td::before {background: repeating-linear-gradient(135deg, #e1f2fd 0, #e1f2fd 5px, #d9effd 5px, #d9effd 7px);}
	.mn table.ex_plan tbody td::before {background: repeating-linear-gradient(135deg, #e1f3e8 0, #e1f3e8 5px, #d9f0e2 5px, #d9f0e2 7px);}

	table.ex_plan tbody td:nth-child(1)::before {content: "プランのおすすめポイント";}
	table.ex_plan tbody td:nth-child(2)::before {content: "データ送受信";}
	table.ex_plan tbody td:nth-child(3)::before {content: "料金";}
	table.ex_plan tbody td:nth-child(4)::before {content: "サービス名/サービス詳細";}
}

@media only screen and (min-width: 1000px) {
	table.ex_plan {border-width: 1px 0 0 1px; border-style: solid; border-collapse: separate; border-spacing: 0; border-radius: 6px; overflow: hidden;}
	table.ex_plan thead th,
	table.ex_plan tbody th,
	table.ex_plan tbody td {border-style: solid; border-width: 0 1px 1px 0; vertical-align: middle;}

	.fm table.ex_plan {box-shadow: 3px 3px 0 0 #4cb2f4; border-color: #7fc8f7;}
	.mn table.ex_plan {box-shadow: 3px 3px 0 0 #4cba76; border-color: #7fce9d;}

	.fm table.ex_plan thead th,
	.fm table.ex_plan tbody th,
	.fm table.ex_plan tbody td {border-color: #4cb2f4;}
	.mn table.ex_plan thead th,
	.mn table.ex_plan tbody th,
	.mn table.ex_plan tbody td {border-color: #4cba76;}

	table.ex_plan tbody td:nth-child(1) {width: 28%;}
	table.ex_plan.light tbody td:nth-child(1) {width: 25%;}
	table.ex_plan tbody td:nth-child(2) {width: 18%;}
	table.ex_plan:not(.light) tbody td:last-child {width: 32%;}
	table.ex_plan.light tbody td:last-child {width: 28%;}
	a.ex_icon_waribiki {position: absolute;}
	table.ex_plan h3 {text-align: left; font-size: 115%;}
	table.ex_plan .ff_din {font-size: 125%;}
}

@media only screen and (min-width: 1000px) {
	.ex1_d_n {display: none;}
}

.ex_icon_isp {background-color: #cc6666; color: #fff; font-size: 80%; display: inline-block; line-height: 1.3; padding: 3px 5px; margin-top: 0.5em;}

.fm .ex_sub { color: #0092f0;}
.mn .ex_sub { color: #009d3c;}

.mn ul.ex_anc_a,
.mn ul.ex_anc_a li,
.mn ul.ex_anc_a li a { border-color: #009d3c;}
.mn ul.ex_anc_a li a:hover { color: #009d3c; }

.ex_wavedash { display: inline-block; transform: rotate(90deg);}

.js_tab_plan .tab_a {	margin: 0;}
.js_tab_plan .tab_a .tab_a_inner { max-width: 1240px; margin: 0 auto; padding: 0px 20px;}

@media only screen and (max-width: 639px) {
	.js_tab_plan .tab_a .tab_a_inner { padding: 0 15px; }
}

/* FAQ */
.box_toggle_faq > .box_toggle:first-child {margin-top: 0;}
.box_toggle_faq > .box_toggle > .item > .tit > .tit_inner {padding: 1em 2em 1em 3.5em;}
.box_toggle_faq > .box_toggle > .item > .tit > .tit_inner > .txt {display: flex; min-height: 30px; font-size: 1.8rem;}
.box_toggle_faq > .box_toggle > .item > .tit > .tit_inner > .txt::before {
    top: 50%;
    left: auto;
    right: -1em;
    margin-top: -.5em;
}
.box_toggle_faq > .box_toggle > .item > .tit > .tit_inner > .txt::after {
    content: "Q";
    position: absolute;
    top: 0em;
    left: -2.5em;
    background: #002673;
    color: #fff;
    border-radius: 50%;
    height: 30px;
    width: 30px;
    display: flex;
    justify-content: center;
    align-items:center;
    font-weight: bold;
    font-size: 1.6rem;
}

.box_toggle_faq > .box_toggle > .item > .item_content {padding: 1em 2em 1em 3.75em; position: relative;}
.box_toggle_faq > .box_toggle > .item > .item_content::after {
    content: "A";
    position: absolute;
    top: 1em;
    left: 1em;
    background: #cc6666;
    color: #fff;
    border-radius: 50%;
    height: 30px;
    width: 30px;
    display: flex;
    justify-content: center;
    align-items:center;
    font-weight: bold;
    font-size: 1.6rem;
}

@media only screen and (max-width: 639px) {
	.box_toggle_faq > .box_toggle > .item > .tit > .tit_inner > .txt {font-size: 1.6rem;}
	.box_toggle_faq > .box_toggle > .item > .item_content {font-size: 1.4rem; padding-left: 4.25em;}
}