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

body {
	position: relative;
	font-size: 14px;
	line-height: 1.5;
	font-family: 'Hiragino Kaku Gothic ProN', 'Meiryo', 'Osaka', 'MS PGothic', 'YuGothic', 'Arial','Helvetica Neue','Helvetica',sans-serif;
	letter-spacing: .03em;
	word-break: break-word;
	word-wrap: break-word;
	overflow-wrap: break-word;
}

*, *::before, *::after {
	box-sizing: border-box;
}

img {
	display: block;
	width: 100%;
}

.page__container {
	padding: 24px 16px 60px;
	color: #202020;
}

.page__container_bg {
	background: #f2f2f2;
}

.btn {
	display: block;
	margin: 40px 0 0;
	padding: 14px;
	background: #6bc5c9;
	border-radius: 2em;
	color: #fff;
	font-weight: bold;
	text-align: center;
	text-decoration: none;
}

button.btn {
	width: 100%;
	border: none;
}

.btn_fixed {
	position: fixed;
	bottom: 0;
	left: 0;
	width: 100%;
	padding: 20px 0;
	border-radius: 0;
}

.btn_second {
	background: #F68699;
}

.list {
	margin: 16px 0;
	list-style: none;
}

.list_line {
	margin: 8px -16px 0 0;
}

.list_line .list__inner {
	border-bottom: 1px solid #dfdfdf;
}

.list__inner {
	padding: 16px 0;
}

.pager {
	display: flex;
	justify-content: space-around;
	align-items: center;
	max-width: 320px;
	margin: 40px auto 0;
	padding: 0;
	list-style: none;
}

.pager__number {
	display: block;
	width: 40px;
	height: 40px;
	border-radius: 50%;
	background: #f2f2f2;
	color: #202020;
	font-weight: bold;
	line-height: 40px;
	text-align: center;
	text-decoration: none;
}

.pager__number_active {
	background: #6bc5c9;
	color: #fff;
	pointer-events: none;
}

.pager_simple {
	justify-content: space-between;
	max-width: none;
	margin: 32px 0 0;
}

.pager__txt {
	position: relative;
	display: block;
	padding: 8px 16px;
	color: #202020;
	text-decoration: none;
}

.arrow::before {
	content: '';
	position: absolute;
	top: 50%;
	left: 0;
	width: 10px;
	height: 10px;
	margin: auto 0;
	border-top: 2px solid #202020;
	border-right: 2px solid #202020;
	transform: translateY(-50%) rotate(-135deg);
}

.pager__txt_next.arrow::before {
	right: 0;
	left: auto;
	transform: translateY(-50%) rotate(45deg);
}

.no-action {
	opacity: 0;
	pointer-events: none;
}

.contents__title {
	padding: 10px;
	background: #6bc5c9;
	color: #fff;
	font-weight: bold;
	text-align: center;
}

/*************************************
**************************************
				info
**************************************
*************************************/

.info {
	position: relative;
	margin: 0 0 40px;
}

.info__img {
	width: 50%;
	margin: 40px auto;
}

.info__img_full {
	width: 100%;
}

.info-read__message {
	margin: 0 0 24px;
	font-weight: bold;
	text-align: center;
}

.info-read__detail {
	margin: 0 0 24px;
	color: #777;
	font-size: 14px;
}

.info__cell {
	margin: 24px 0;
}

.info__title {
	font-size: 16px;
	font-weight: bold;
}

.info__details {
	color: #777;
}

.info__list {
	list-style-position: outside;
	margin: 8px 0 0 16px;
	color: #777;
}

.info__list_card {
	list-style: none;
	margin: 0;
}

.info__list_caution {
	list-style-type: "※";
}

.info__item {
	margin: 0 0 4px;
}

ul .info__item {
	list-style-type: disc;
}

ul .info__item_inline {
	display: flex;
	align-items: center;
	width: 100%;
	padding: 16px 12px;
	margin: 0 0 8px;
	color: #202020;
	font-weight: bold;
	background: #E2F5F6;
	border-radius: 10px;
}

.info__link {
	color: #6bc5c9;
}

.table {
	width: 100%;
	margin: 8px 0 16px;
	font-size: 12px;
	border-collapse: collapse;
	border: 1px solid #ddd;
}

.table__item {
	padding: 6px 8px;
	border: 1px solid #ddd;
}

.table__item_title {
	background: #f2f2f2;
}

.table__item .info__list {
	font-size: 10px;
}

.table__item .info__item {
	margin: 0 0 8px;;
}

.table__item .info__item:last-child {
	margin: 0;
}

/*************************************
**************************************
				point
**************************************
*************************************/

.point {
	margin: 0;
}

.point .info-read .info__img {
	width: 100%;
}

.point .info-read__message {
	font-weight: normal;
}

.point .info__inner .info-read__message {
	margin: 40px 0 0;
	text-align: left;
}

.point .info__img {
	width: 80%;
	margin: 40px auto 24px;
}

.list__img_icon {
	width: 32px;
	margin: 0 8px 0 0;
}

.point .info__img.info__img_point-arrow {
	width: 60%;
	margin: 10px auto;
}

.point .info__item_float-card {
	padding: 24px 0 16px;
	border-radius: 10px;
	box-shadow: 0px 0px 6px 6px rgba(0, 0, 0, .1);
}

.info__item_float-card .info__img {
	margin: 0 auto 16px;
}

/*************************************
**************************************
				terms
**************************************
*************************************/

.terms {
	margin: 0;
}

.info__list_chinese {
	list-style-type: cjk-ideographic;
	margin: 8px 0 0 32px;
}

.info__sign {
	padding: 24px 0;
	border-top: 1px solid #ccc;
}

/*************************************
**************************************
				howto
**************************************
*************************************/

.howto-list {
	list-style: none;
}

.howto-list__item {
	margin: 0 0 60px;
}

.howto-list__item:last-child {
	margin: 0 0 40px;
}

.howto__img {
	margin: 24px 0;
}

.howto__img_step {
	width: auto;
	max-height: 42px;
	margin: 0 auto;
}

.howto__title {
	margin: 8px 0 0;
	color: #6bc5c9;
	text-align: center;
	font-size: 16px;
	font-weight: bold;
}

.howto__detail {
	padding: 16px;
	background: #e2f5f6;
	border-radius: 8px;
}

/*************************************
**************************************
			napkin-info
**************************************
*************************************/

.napkin__inner {
	margin: 0 0 24px;
}

.napkin__title {
	font-size: 16px;
	font-weight: bold;
}

.napkin__sub {
	color: #777;
}

.list_encircle {
	background: #fff;
	border-radius: 8px;
}

.list_encircle .list__inner {
	display: flex;
	align-items: flex-start;
	padding: 16px;
	border-bottom: 1px dotted #dfdfdf;
}

.list_encircle .list__inner:last-child {
	border: none;
}

.list_encircle .list__title {
	flex: 1;
	color: #777;
}

.list_encircle .list__detail {
	width: 55%;
}

.list_encircle .list__item {
	list-style: disc;
}

.note {
	margin: 24px 0 0;
	color: #777;
	font-size: 12px;
}

/*************************************
**************************************
				inquiry
**************************************
*************************************/

.form__set {
	margin: 24px 0 24px;
}

.form__title {
	margin: 0 0 8px;
}

.form__attention {
	display: block;
	color: #777;
}

.required {
	padding: 4px 8px;
	margin: 0 0 0 4px;
	background: #f97289;
	border-radius: 2px;
	color: #fff;
	font-size: 10px;
}

.form__input {
	width: 100%;
	padding: 16px;
	font-family: 'Hiragino Kaku Gothic ProN', 'Meiryo', 'Osaka', 'MS PGothic', 'YuGothic', 'Arial','Helvetica Neue','Helvetica',sans-serif;
	border: 1px solid #dfdfdf;
	border-radius: 4px;
}

.form__input_select {
	background: #f2f2f2;
	border: none;
	color: #202020;
}

.triangle {
	position: relative;
}

.triangle::before {
	position: absolute;
	top: 40%;
	right: 16px;
	content: "";
	display: block;
	width: 16px;
	height: 8px;
	background: #777;
	border-radius: 3px;
	clip-path: polygon(0 0, 100% 0, 50% 100%);
	pointer-events: none;
}

.form__input_txt {
	height: 48px;
	padding: 0 16px;
}

.form__input_txtarea {
	height: 200px;
}

::placeholder {
	color: rgba(32, 32, 32, .2);
}

.form .btn {
	width: 100%;
	border: none;
	font-family: 'Hiragino Kaku Gothic ProN', 'Meiryo', 'Osaka', 'MS PGothic', 'YuGothic', 'Arial','Helvetica Neue','Helvetica',sans-serif;
}

.note .info__link {
	padding: 0 8px;
}

.form__error {
	color: #f97289;
	font-size: 12px;
}


/*************************************
**************************************
				survey
**************************************
*************************************/

.survey .form__set {
	margin: 40px 0;
}

.page__title {
	font-size: 16px;
	font-weight: bold;
}

.page__details {
	margin: 24px 0 0;
	color: #777;
}

.page__memo {
	display: inline-block;
	margin: 8px 0 0 0;
}

.page__details .required {
	margin: 8px 0 0 0;
}

.survey input[type="radio"],
.survey input[type="checkbox"] {
	display: none;
}

.type{
	display: block;
	position: relative;
	cursor: pointer;
	padding: 12px 0 12px 32px;
}

.type::before,
.type::after {
	content: "";
	position: absolute;
	transform: translateY(-50%);
	top: 50%;
	display: block; 
}

.type_radio::before,
.type_radio::after {
	border-radius: 50%;
}

.type_radio::before {
	background-color: #fff;
	border: 1px solid #ddd;
	border-radius: 50%;
	width: 24px;
	height: 24px;
	left: 0;
}

.type_radio::after {
	background-color: #6BC5C9;
	border-radius: 50%;
	opacity: 0;
	width: 16px;
	height: 16px;
	left: 4px
  }

  input[type="radio"]:checked + .type_radio::after {
	opacity: 1;
  }

  .type_check::before {
	background-color: #fff;
	border: 1px solid #ddd;
	border-radius: 3px;
	width: 24px;
	height: 24px;
	left: 0;
}

input[type="checkbox"]:checked + .type_check::before {
	background-color: #6BC5C9;
  }

.type_check::after {
	content: "";
	position: absolute;
	top: 0;
	bottom: 0;
	left: 9px;
	transform: rotate(40deg);
	display: block;
	width: 6px;
	height: 11px;
	margin: auto 0;
	border-bottom: 2px solid white;
	border-right: 2px solid white;
	opacity: 0;
 }

 input[type="checkbox"]:checked + .type_check::after {
	opacity: 1;
  }

.form__img {
	margin: 0 0 12px;
}




/*************************************
**************************************
				faq
**************************************
*************************************/
.search {
	position: relative;
}

.search__input {
	display: block;
	width: 100%;
	margin: 0 0 24px;
	padding: 12px 64px 12px 16px;
	border: 1px solid #dfdfdf;
	border-radius: 8px;
	font-size: 14px;
}

input[type="search"]::-webkit-search-cancel-button {
	-webkit-appearance: none;
}

.search__btn {
	position: absolute;
	top: 4px;
	right: 4px;
	width: 60px;
	height: 40px;
	color: #fff;
	background: #6bc5c9;
	border: none;
	border-radius: 6px;
}

.search__title {
	margin: 16px 0;
	color: #777;
}

.search__keyword {
	color: #202020;
	font-weight: bold;
}

.search__keyword::before {
	content: "'";
}

.search__keyword::after {
	content: "'";
}

.faq__headline {
	margin: 24px 0 0;
	font-weight: bold;
}

.stretch .list__inner {
	/* margin: 0 0 16px; */
	padding: 0;
}

.stretch__input {
	display: none;
}

.stretch__label {
	position: relative;
	display: block;
	padding: 16px 40px 16px 0;
	color: #777;
	cursor :pointer;
}

.stretch__label::after {
	content: '';
	position: absolute;
	top: 0;
	right: 16px;
	bottom: 0;
	width: 8px;
	height: 8px;
	margin: auto 0;
	border-top: 2px solid #777;
	border-right: 2px solid #777;
	transition: all .2s ease;
}

.stretch__label::after {
	-webkit-transform: rotate(135deg);
			transform: rotate(135deg);
}

.stretch__body {
	max-height: 0;
	height: 0;
	padding: 0 16px 0 0;
	overflow: hidden;
	opacity: 0;
	transition: all .2s ease;
}

.stretch__body-icon {
	display: inline-block;
	width: 16px;
	margin: 0 2px -2px;
}

.stretch__input:checked ~ .stretch__body {
	height: auto;
	max-height: 100%;
	margin: 0 0 16px 0;
	opacity: 1;
}

.stretch__input:checked + .stretch__title .stretch__label::after {
	-webkit-transform: rotate(-45deg);
			transform: rotate(-45deg);
}

.stretch__list {
	padding: 0 0 0 24px;
}

.stretch__item {
	margin: 0 0 4px 0;
}

.stretch__item-sub {
	margin: 0 0 16px;
	color: #777;
}

.stretch__caution {
	position: relative;
	display: block;
	margin: 4px 0 0;
	padding: 0 0 0 14px;
	color: #777;
	font-size: 12px;
}

.stretch__caution::before {
	content: "※";
	position: absolute;
	left: 0;
}

/*************************************
**************************************
				news
**************************************
*************************************/

.news .triangle {
	width: 160px;
	margin: 0 0 0 auto;
}

.news .form__input_select {
	padding: 12px 16px;
}

.news .list__inner {
	padding: 0;
}

.list__link {
	display: block;
	padding: 16px 16px 16px 0;
	color: #202020;
	text-decoration: none;
}

.day {
	font-size: 12px;
	font-weight: bold;
}

.tag {
	display: inline-block;
	padding: 2px 16px;
	background: #777777;
	border-radius: 2em;
	color: #fff;
	font-size: 10px;
}

.tag_notice {
	background: #6BC5C9;
}

.tag_important {
	background: #F97289;
}

.tag_service {
	background: #70b97b;
}

.list__title {
	display: -webkit-box;
	max-height: 42px;
	margin: 8px 0 0;
	-webkit-box-orient: vertical;
	-webkit-line-clamp: 2;
	overflow: hidden;
	line-height: 1.5;
}

/*************************************
**************************************
			news-detail
**************************************
*************************************/

.news-detail__inner {
	padding: 0 0 40px;
	border-bottom: 1px solid #dfdfdf;
}

.news-detail__title {
	margin: 16px 0 0;
	font-size: 16px;
	font-weight: bold;
}

.news-detail__content {
	margin: 40px 0 0;
}

.news-detail__img {
	margin: 16px 0 0;
}

.news-detail__txt {
	margin: 16px 0 0;
}

.news-detail__link {
	color: #6bc5c9;
}

.share {
	margin: 40px 0 0;
}

.share__items {
	position: relative;
	display: flex;
	margin: 16px 0 0;
}

.share__link {
	position: relative;
	display: block;
	margin: 0 16px 0 0;
	overflow: hidden;
}

.share-icon__title {
	position: absolute;
	left: -9999px;
}

.share-icon {
	display: block;
	width: 24px;
	height: 24px;
}

.share__link_copy {
	padding: 0;
	background: transparent;
	border: none;
}

.success-msg {
	display: none;
	position: absolute;
	bottom: -50px;
	width: 100%;
	padding: 10px;
	color: #fff;
	background: #6bc4c8;
	border-radius: 8px;
	text-align: center;
}

/*************************************
**************************************
				partner
**************************************
*************************************/

.partner__group {
	margin: 0 0 40px;
}

.partner__sub {
	margin: 24px 0 0;
	color: #777;
	font-weight: bold;
	text-align: center;
}

.partner__list {
	display: flex;
	flex-wrap: wrap;
}

.partner__item {
	width: calc(100% / 3);
	padding: 4px;
	list-style: none;
}

/*************************************
**************************************
				on-air
**************************************
*************************************/

.on-air .partner__list {
	display: block;
}

.on-air .partner__item {
	width: 100%;
	margin: 0 0 40px;
}

.on-air .partner__item .btn {
	max-width: 250px;
	margin: 16px auto 0;
	padding: 10px;
	font-weight: normal;
}

.partner__detail {
	margin: 0 0 8px;
	color: #777;
	font-weight: bold;
}

.text__link {
	display: inline-block;
	margin: 8px 0 0;
	color: #6BC5C9;
}


.advertisement {
	display: block;
	width: 100%;
	border: 1px solid #f2f2f2;
	border-radius: 8px;
}

/*************************************
**************************************
			floating
**************************************
*************************************/
.floating {
	padding: 0 16px 40px;
}

.floating__img-container {
	margin: 0 -16px 58px;
}

.pattern-2 {
	padding: 60px 0 0 0;
}

.pattern-3 {
	padding: 80px 0 0 0;
}

.fixed {
	position: fixed;
	bottom: 40px;
	left: 50%;
	transform: translateX(-50%);
	width: 100%;
	padding: 0 16px;
}


/*************************************
**************************************
			divination
**************************************
*************************************/

.divination__target {
	position: relative;
	padding: 24px 0 10px;
	text-align: center;
}

.divination__bg {
	position: absolute;
	top: 10px;
	left: 50%;
	transform:translateX(-50%);
	z-index: -1;
	width: 115%;
}

.divination__rank {
	font-size: 12px;
}

.constellation {
	margin: 4px 0 0;
	font-size: 40px;
	font-weight: bold;
	line-height: 1;
}

.divination-message {
	margin: 8px 0 0;
	font-weight: bold;
	text-align: center;
}

.divination-message__sub {
	position: relative;
	display: inline-block;
	padding: 4px 10px;
	background-color: #6BC5C9;
	border-radius: 1em;
	color: #FFF;
	font-size: 12px;
}

.divination-message__sub::before {
	content: "";
    position: absolute;
    top: 100%;
    right: 0;
    left: 0;
    width: 4px;
    height: 8px;
    margin: -1px auto 0;
    background: #6BC5C9;
    clip-path: polygon(50% 8px, 0% 0%, 4px 0%);
}

.divination-message__main {
	margin: 8px 0 0;
	color: #6BC5C9;
	font-size: 16px;	
}

.column2 {
	display: flex;
	margin: 24px -8px 0;
}

.column__inner {
	width: 50%;
	padding: 16px 4px;
	margin: 0 8px;
	background: #E5F3F3;
	border-radius: 8px;
	font-size: 12px;
	text-align: center;
}

.column__description {
	margin: 4px 0 0;
	font-size: 14px;
	font-weight: bold;
}

.divination .list_line {
	margin: 8px 0 0 0;
}

.list__item_inline {
	display: flex;
}

.divination .list__item_inline {
	margin: 0 0 8px;
	font-size: 16px;
	font-weight: bold;;
}

.evaluation {
	display: flex;
	align-items: center;
	margin: 0 0 0 8px;
}

.evaluation__img {
	width: 14px;
	height: 14px;
	margin: 0 2px 0 0;
}

.evaluation-list .list__inner:last-child {
	border: none;
}

.evaluation-list__txt {
	color: #777;
}

.constellation-rank {
	margin: 40px 0 0;
}

.constellation-rank__title {
	max-width: 220px;
	margin: 0 auto;
}

.constellation-rank .list__inner {
	padding: 0;
}

.constellation-rank .list__link {
	position: relative;
	display: flex;
	align-items: center;
	padding: 8px 16px 8px 0;
}

.constellation-rank .arrow::before {
	right: 0;
	left: auto;
	transform: translateY(-50%) rotate(45deg);
}

.constellation-rank .list__item  {
	margin: 0 0 0 16px;
}

.constellation-rank .list__item:first-child {
	margin: 0;
}

.list__item_rank {
	position: relative;
	width: 28px;
	height: 28px;
	background-size: contain;
	background-repeat: no-repeat;
}

.list__item_rank-first,
.list__item_rank-second,
.list__item_rank-third {
	color: #FFF;
}

.list__item_rank-first {
	background-image: url(../images/divination/icon-rank-first.webp);
}

.list__item_rank-second {
	background-image: url(../images/divination/icon-rank-second.webp);
}

.list__item_rank-third {
	background-image: url(../images/divination/icon-rank-third.webp);
}

.list__item_rank span {
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	width: 28px;
	font-size: 12px;
	font-weight: bold;
	text-align: center;
}

.list__item_mark {
	width: 40px;
	height: 40px;
}

.list__item_constellation {
	flex: 1;
	font-size: 14px;
}

/*************************************
**************************************
			inquiry-compleat
**************************************
*************************************/

.graph__list {
	margin: 40px 0 0;
}

.graph__item {
	margin-top: 24px;
}

.graph__item:nth-child(n + 2) {
	margin-top: 24px;
}

.graph__item canvas {
	width: 70% !important;
	height: 70% !important;
	margin: 0 auto;
}

.graph__title {
	margin-bottom: 16px;
	font-size: 16px;
	font-weight: bold;
}

.graph__title-info {
	margin: 4px 0 0;
	color: #777;
	font-size: 12px;
}

.graph__date {
	margin: 16px auto 0 auto;
	padding: 8px 16px;
	background: #f5f5f5;
	border-radius: 4px;
}

.graph__date li {
	padding: 5px 0;
	list-style-type: none;
	color: #202020;
}

.graph__item span {
	font-weight: bold;
}

.bar-graph {
	width: 100% !important;
	height: 450px !important;
}