@charset "UTF-8";

/* ---------------------------------
 width <= 1600px
--------------------------------- */
@media screen and (min-width:1px) and (max-width:1600px) {
.wrapSection {
	width: 1280px;
}
.photo__area {
	position: relative;
	flex: 0 0 calc( 44% - 25px );
}
.text__area {
	flex: 0 0 calc( 56% - 25px );
}
.photo__area img {
	aspect-ratio: 1 / 1;
	width: 100%;
	height: auto;
}
.photo__outer { /* figure */
	width: 100%;
	height: auto;
}
.snavi p a {
	font-size: 16px;
}
/* under 1600 */
}

/* ---------------------------------
 width <= 1280px
--------------------------------- */
@media screen and (min-width:1px) and (max-width:1280px) {
#info {
	width: 1050px;
	flex-wrap: wrap;
}
#info__title {
	flex: 0 0 100%;
	padding: 0 0 50px;
	text-align: center;
}
#info__contents {
	flex: 0 0 calc( 100% - 340px );
}
.wrapSection {
	width: 100%;
}
/* under 1280 */
}

/* ---------------------------------
 width <= 1160px
--------------------------------- */
@media screen and (min-width:1px) and (max-width:1160px) {
#topLink__Area {
	width: 735px;
}
#info {
	width: 100%;
	flex-wrap: wrap;
}
.photo__area {
	position: relative;
	flex: 0 0 calc( 40% - 20px );
}
.text__area {
	flex: 0 0 calc( 60% - 20px );
}
.column-3 {
	grid-template-columns: repeat(2, 1fr);
}
.column-2 {
	grid-template-columns: repeat(2, 1fr);
}
.toiawase__content {
	padding: 20px 5px;
}
/* under 1160 */
}

/* ---------------------------------
 width <= 1023px
--------------------------------- */
@media screen and (min-width:1px) and (max-width:1023px) {
.wrapSection {
	display: block;
}
.photo__outer { /* figure */
	max-width: 640px;
	margin: 0 auto 30px;
}
.photo__area img {
	aspect-ratio: 1 / 0.5625;
	display: block;
	width: 100%;
	margin: auto;
}
.text__area--title {
	display: flex;
	margin: 0 0 10px;
}
/* under 1023 */
}

/* ---------------------------------
 width <= 767px
--------------------------------- */
@media screen and (min-width:1px) and (max-width:767px) {
#topLink__Area {
	width: 360px;
}
/* under 767 */
}

/* ---------------------------------
 width <= 640px
--------------------------------- */
@media screen and (min-width:1px) and (max-width:640px) {
#info {
	display: block;
}
#info__contents {
	padding: 0 0 30px;
}
.for-pc-parts {
	display: none;
}
.for-sp-parts {
	display: block;
}
/* under 640 */
}

/* ---------------------------------
 width <= 640px
--------------------------------- */
@media screen and (min-width:1px) and (max-width:640px) {
#info {
	display: block;
}
#info__contents {
	padding: 0 0 30px;
}
.for-pc-parts {
	display: none;
}
.for-sp-parts {
	display: block;
}
.info__item:nth-of-type(n+6) {
	display: none;
}
/* under 640 */
}

/* ---------------------------------
 width <= 540px
--------------------------------- */
@media screen and (min-width:1px) and (max-width:540px) {
.snavi {
	display: block;
}
.text__area .snavi > p {
	margin: 0 0 5px;
}
.toiawase__content--inner {
	display: block;
}
#front-page .sectionInfo:first-child {
	margin: 0 0 20px;
}
#front-page .sectionInfo__label {
	max-width: 400px;
	margin: 0 auto 10px;
}
/* under 540 */
}

/* ---------------------------------
 width <= 430px
--------------------------------- */
@media screen and (min-width:1px) and (max-width:430px) {
#mainCatch__title {
	margin: 0 0 40px;
	font-size: 36px;
}
#mainCatch__title .char.space {
	overflow: hidden;
	width: 12px;
}
#mainCatch__desc {
	line-height: 2;
	letter-spacing: 1px;
	font-weight: 400;
	font-size: 14px;
}
#mainCatch__desc .mainCatch__desc--line .break {
	display: block;
}
.text__area--title {
	display: block;
	margin: 0 0 30px;
}
.sectionTitle_eng { /* h2 > div */
	margin: 0;
	padding: 0;
	line-height: 1;
	text-align: center;
}
.homeSection h3.toiawase__title {
	font-size: 16px;
}
.text__area p {
	line-height: 1.8;
	font-size: 16px;
}
/* under 430 */
}

/* ---------------------------------
 width <= 375px
--------------------------------- */
@media screen and (min-width:1px) and (max-width:375px) {
#topLink__Area {
	width: 320px;
	height: 148px;
}
.topLink__Item {
	flex: 0 0 320px;
	width: 320px;
	height: 108px;
}
.topLink__Item a {
	width: 318px;
	height: 108px;
}
.topLink__Item img {
	width: 100%;
	height: 100%;
}
/* under 375 */
}

/* --- end of css --- */