@charset "UTF-8";

@media only screen and (max-width: 768px) {
	.sfg__lead {
		margin: 21px 0 0;
		line-height: 1.8;
	}
	.sfg__annotation li:first-child {
    margin: 2px 0 0;
	}
	.title__lower {
		font-size: 20px;
		letter-spacing: 0.06em;
	}
	.title__lower_num {
		left: -39px;
		width: 31px;
		height: 31px;
		line-height: 31px;
		background-size: 31px 31px;
	}
	.lay__2,
	.lay__2:first-child {
		width: 100%;
		float: none;
		margin: 0;
	}
	.lay__2 + .lay__2 {
		width: 100%;
		margin-left: 0;
	}
	.check {
		width: auto;
		padding: 0 5.6% 24px;
	}
	.check__lead {
		margin-top: 22px;
	}
	.check__nav {
		font-size: 14px;
		margin: 0;
		line-height: 1.214285714285714;
	}
	.check__sub {
		margin-left: 0;
		margin-right: 0;
	}
	.check.check__sub {
		width: auto;
		margin-left: auto;
		margin-right: auto;
	}
	.ly-wrp-main .check__nav a {
    display: block;
    padding: 8px 21px 8px 8px;
    background: transparent url(./img/arrow_simple_down_red.svg) right 6px center no-repeat;
    background-size: 9px 6px;
    font-weight: bold;
    text-decoration: none;
	}
	.ly-wrp-main .check__howto {
		margin: 20px 0 0;
		font-size: 15px;
	}
	.check__howto_wrap {
		text-align: right;
	}
	.check__howto:after {
		margin: 0 0 0 3px;
		vertical-align: -0.27em;
	}
	.check__text {
		margin-top: 5px;
		font-size: 15px;
		line-height: 1.6;
		letter-spacing: 0.04em;
	}
	.check__text_sub {
		font-size: 12px;
		line-height: 1.583333333333333;
	}
	.check__br {
		display: none;
	}
	.check__lower_wrap {
		padding: 29px 5.6% 0;
	}
	.check__lower_wrap.num_2 {
		padding: 45px 0 0;
	}
	.check__lower_wrap_inner {
		width: auto;
		margin: 0;
		padding: 0 0 0 39px;
	}
	.num_2 .check__lower_wrap_inner {
		margin-top: 0px;
		padding: 0 0 0 39px;
	}	
	.check__note {
		font-size: 10px;
	}
	.check__choose {
		min-width: auto;
		margin-top: 0;
	}
	.check__choose-error-text {
		font-size: 12px;
		width: 100%;
		line-height: 45px;
	}
	.check__choose-tabs {
		width: auto;
		padding: 17px 5.6%;
	}
	.check__choose-tab {
		margin-left: 2px;
		height: 90px;
	}
	.check__choose-tab:after {
		right: 6px;
		top: calc(50% - 8px);
		width: 16px;
		height: 16px;
		background-size: 16px 16px;
	}
	.check__choose-tab--active:before {
		left: calc(50% - 10.5px);
		bottom: -15px;
	}
	.check__choose-item {
		font-size: 14px;
		padding: 63px 0 0;
		line-height: 1;
		white-space: nowrap;
		background-position: center 12.5px;
		background-size: 40.5px 40.5px;
	}
	.check__choose-tab--active .check__choose-item {
		padding: 63px 0 0;
	}
	.check__selection {
		padding: 0 5.6%;
	}
	.check__selection-inner {
		width: 100%;
		padding: 0;
		border-top: none;
		border-radius: 4px 4px 0 0;
	}
	.check__selection-tabs {
		display: flex;
		flex-wrap: wrap;
		justify-content: space-between;
		width: auto;
		margin: 0;
		padding: 10.5px 4.504504504504505% 22px;
	}
	.check__selection-tabs--drink .check__selection-tab,
	.check__selection-tab {
		float: none;
		width: 48.01980198019802%;
		height: 45px;
		margin: 11.5px 0 0
	}
	.check__selection-tab:before {
		right: 9px;
		top: calc(50% - 3.5px);
		width: 10px;
		height: 7px;
		background-size: 10px 7px;
	}
	.ly-wrp-main .check__selection-genre {
		padding: 0 12px 0 0;
		font-size: 13px;
		line-height: 45px;
		letter-spacing: 0.08em;
		transition: none;
	}
	.check__selection-tab--active .check__selection-genre {
		padding: 0;
	}	
	.check__selection-list {
		padding: 0 4.545454545454545%;
	}
	.check__selection-list--sp {
		display: block;
	}
	.check__selection-list--pc {
		display: none;
	}
	.check__selection-item {
		width: calc(33.333333333333333% - 6px - 1.333333333333333px);
		min-height: 102px;
		margin: 0 0 5px 5px;
		border-radius: 4px;
	}
	.check__selection-item:nth-child(3n+1) {
		margin-left: 0;
	}
	.check__selection-image {
		height: 60px;
	}
	/*.check__selection-image > img {
		width: auto;
		max-width: 100%;
		height: 55px;
	}*/
	.check__selection-detail {
		font-size: 10px;
		padding: 4px 4px 0;
	}
	.check__selection-slider-area {
		position: relative;
		height: 44px;
		margin: 11px 0 0;
	}
	.check__selection-slider {
		width: 27px;
		height: 27px;
		top: -1px;
	}
	.check__selection-slider--prev {
		left: 4.545454545454545%;
	}
	.check__selection-slider--next {
		right: 4.545454545454545%;
	}
	.check__selected {
		padding: 0 0 30px;
	}
	.check__selected-inner {
		width: auto;
		margin: 0 5.6%;
		padding: 15px 4%;
	}
	.check__selected-title {
		font-size: 19px;
		letter-spacing: 0.06em;
	}
	.check__selected-text {
		margin: 1px 0 0;
		font-size: 14px;
		letter-spacing: 0.08em;
	}
	.check__selected-list {
		justify-content: flex-start;
		margin-top: 11px;
		text-align: left;
	}
	.check__selected-item {
		width: 32.343234323432343%;
		min-height: 106px;
		margin: 0 0 1.485148514851485% 1.485148514851486%;
		transition: none;
	}
	.check__selected-item:nth-child(3n+1) {
		margin-left: 0;
	}
	.check__selected-image {
		height: 60px;
		padding-top: 5px;
	}
	/*.check__selected-image > img {
		width: auto;
		height: 55px;
	}*/
	.check__selected-detail {
		font-size: 10px;
		padding: 4px 2px;
		letter-spacing: -0.03em;
	}
	.check__selected-cancel {
		width: 16px;
		height: 16px;
		top: 5px;
		right: 5px;
	}
	.check__selected-item-note {
		font-size: 10px;
	}
	.check__input-title {
		font-size: 18px;
		margin-top: 30px;
		letter-spacing: 0.04em;
	}
	.check__input-error {
		font-size: 12px;
		line-height: 45px;
	}
	.check__input-gender {
		margin: 9px 0 0;
	}
	.check__input-gender-item {
		width: calc(50% - 4.5px);
	}
	.check__input-gender-item + .check__input-gender-item {
    margin-left: 9px;
	}
	.check__input-gender-label:checked + .check__input-gender-appearance::after {
		width: 18.5px;
		height: 18.5px;
		left: 13px;
		border-width: 4px;
	}
	.check__input-gender-appearance {
		font-size: 15px;
		line-height: 41px;
	}
	.check__input-gender-appearance::before {
		width: 22.5px;
		height: 22.5px;
		left: 11px;
	}
	.check__input-pregnant {
    margin-top: 15px;
    margin-bottom: 0;
	}
	.check__input-pregnant::before {
		right: 20%;
		top: -10px;
	}
	.check__input-pregnant-label:checked + .check__input-pregnant-appearance::after {
		width: 18.5px;
		height: 18.5px;
		left: 14px;
		border-width: 4px;
	}
	.check__input-pregnant-appearance {
		padding-left: 64px;
		font-size: 15px;
		line-height: 45px;
	}
	.check__input-pregnant-appearance::before {
		width: 22.5px;
		height: 22.5px;
		left: 12px;
	}
	.check__input-age {
		margin-top: 8px;
		margin-bottom: 0;
	}
	.check__input-age-label::before {
		width: 20px;
		height: 20px;
		right: 13px;
	}
	.check__input-age-label::after {
		top: 19px;
	}
	.check__input-age-select {
		font-size: 15px;
		padding: 9px 15px;
	}
	.check__input-level {
    margin: 10px 0 9px;
	}
	.check__input-level-appearance {
		height: 131px;
	}
	.check__input-level-level {
		position: relative;
		width: 46.200607902735562%;
		padding: 24px 10px;
		border-left-width: 43px;
	}
	.check__input-level-label:checked + .check__input-level-appearance:before {
		width: 43px;
	}
	.check__input-level-label:checked + .check__input-level-appearance:after {
		width: calc(100% - 43px);
	}
	.check__input-level-level::before {
		left: -33px;
		width: 22.5px;
		height: 22.5px;
		margin-top: -11.25px;
		border-width: 2px;
	}
	.check__input-level-label:checked + .check__input-level-appearance .check__input-level-level::after {
		left: -31px;
		width: 18.5px;
		height: 18.5px;
		margin-top: -9.25px;
		border-width: 4px;
	}
	.check__input-level-pct {
		width: 57px;
		height: 57px;
		margin-right: 4px;
	}
	.check__input-level-text {
		margin: 3px 0 0;
		font-size: 12px;
	}
	.check__input-level-detail {
		padding: 10px 13px 10px 0;
		font-size: 12px;
		line-height: 1.583333333333333;
	}
	.check__calculation {
		margin-top: 23px;
	}
	.check__calculation-inner {
		width: auto;
		padding: 24px 5.6% 26px;
	}
	.check__calculation-button {
		font-size: 18px;
		width: 100%;
		padding: 27px 0 27px;
	}
	.check__calculation-button::after {
		right: 15px;
	}
	.check__button-area {
		padding: 24px 5.6% 26px;
	}
	.ly-wrp-main .check__button-area .check__link-area-button {
		padding: 29px 0;
		box-shadow: 0 2px 0 #e5e5e5;
	}
}

@media only screen and (max-width: 360px) {
	.check__calculation-button {
		font-size: 16px;
	}
	.check__calculation-button::after {
		width: 19.5px;
		height: 19.5px;
		right: 15.5px;
	}
	.check__calculation-button::after {
		right: 9.5px;
	}
}