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

/*============================
and moreページの追加CSS（PC用）
============================*/

.c-ttl-head.andmore-list {
  background: url(../images/andmore/) no-repeat center;
  background-size: cover;
  padding: 50px 0;
}

.p-andmore-main__top-image img {
  width: 120px; 
  height: auto; 
}
/* PC表示（画面幅768px以上）のCSS */
@media screen and (min-width: 768px) {
  .p-andmore-main__top-image img {
    width: 200px; /* 元の幅に戻す */
    height: auto; /* 元の高さに戻す */
  }
}

.p-andmore-main__top-image {
		padding-top: 20px;
  text-align: center; 
}

/*main===============*/
.l-andmore-main{
  background-color: #000;
}
.l-container-andmore {
	background-color: black;
}

.p-andmore-main {
  background-color: #000;
	 overflow: hidden;
	 /* background: url(../images/andmore/black_back.jpg) center top; */
	/* padding: 50px 0; */
}

.p-andmore-main__ttl {
	color: #9F764A;
  text-align: left;
	font-size: 18px;
	font-size: 1.125rem;
	line-height: 2;
	padding-top: 10px;
	margin-bottom: 50px;
  font-family: serif;
}
@media screen and (min-width: 768px) {
	.p-andmore-main__ttl {
			text-align: center;
      padding-top: 80px;
			margin-bottom: 100px;
			font-size: 30px;
			font-size: 1.875rem;
      font-family: serif;
	}
}
.p-andmore-main__contents .contents-ttl {
	color: #b8b8b8;
	font-size: 16px;
	margin-bottom: 20px;
	line-height: 1.6;
  padding-bottom: 20px;  
  font-family: serif;
}
@media screen and (min-width: 768px) {
	.p-andmore-main__contents .contents-ttl {
    font-size: 20px;
    font-size: 1.5rem;
		padding-bottom: 30px;
    font-family: serif;
	}
}
/*commitment===============*/
.p-andmore-commitment {
  background-color: #000;
}
@media screen and (min-width: 768px) {
	.p-andmore-commitment {
			margin-bottom: 100px;
	}
}
.p-andmore-commitment__ttl {
	background: #000;
 color: #fff;
	text-align: left;
	padding: 50px 0;
}

.p-andmore-commitment__ttl.re-ttl .l-container {
    text-align: right;
}
.andmore-sub {
  font-size: 0.8rem;
  color: #9F764A;
}
@media screen and (min-width: 768px) {
  .andmore-sub {
    font-size: 1.2rem;
	}
}
.p-andmore-commitment__box {
  margin-bottom: 50px;
}
.p-story-commitment__box .p-andmore-commitment__box .photo {
  text-align: center;
  background: url(../images/andmore/b_back_298x262.jpg) center top;
}
@media screen and (min-width: 768px) {
  .p-story-commitment__box .p-andmore-commitment__box .photo {
    width: 55%;
    text-align: right;
    background: #000;
  }
}
.p-story-commitment__box .p-andmore-commitment__box .photo img {
  vertical-align: bottom;
}
 .p-andmore-commitment__box .contents {
  background: url(../images/andmore/b_back_298x262.jpg) center top;
  padding: 30px 20px;
}
@media screen and (min-width: 768px) {
  .p-story-commitment__box .p-andmore-commitment__box .contents {
    width: 45%;
    padding: 100px 50px 50px;
    min-height: 500px;
  }
}
.p-story-commitment__box .contents .c-basic-txt,.andmore-txt {
  color: #fff;
}
/* .andmore_box_space {
  height: 1px;
  background-color: #b8b8b8;
} */

.p-andmore-main__photo {
  display: flex;
  justify-content: center;
}
.p-andmore-main__photo img {
  width: 100vw;
  height: auto;
}
.p-andmore-commitment__ttl .ttl {
  color: #9F764A;
  /* margin-bottom: 30px; */
  margin-bottom: 10px;
  font-size: 20px;
  font-size: 1.75rem;
  line-height: 1.3;
}
@media screen and (min-width: 768px) {
  .p-andmore-commitment__ttl .ttl {
    /* margin-bottom: 50px; */
    margin-bottom: 20px;
    font-size: 40px;
    font-size: 2.5rem;
  }
}
.andmore_ins_img {
  width: 35px;
  height: 35px;
}
@media screen and (min-width: 768px) {
  .andmore_ins_img {
    width: 65px;
    height: 65px;
  }
}


/*main===============*/

.l-container-andmore {
	background-color: black;
}

.p-andmore-main__ttl {
	color: #ffff;
	text-align: left;
	font-size: 18px;
	font-size: 1.125rem;
	line-height: 2;
	margin-top: 20px;
	margin-bottom: 50px;
}
@media screen and (min-width: 768px) {
	.p-andmore-main__ttl {
			text-align: center;
			margin-bottom: 100px;
			font-size: 30px;
			font-size: 1.875rem;
	}
}
.p-andmore-main__ttl .in {
	position: relative;
	display: block;
	opacity: 0;
}
.p-andmore-main__ttl.active .in:nth-of-type(1) {
	-moz-animation: text-anime 1500ms alternate 500ms forwards;
	-webkit-animation: text-anime 1500ms alternate 500ms forwards;
	animation: text-anime 1500ms alternate 500ms forwards;
}
.p-andmore-main__ttl.active .in:nth-of-type(2) {
	-moz-animation: text-anime 1500ms alternate 1000ms forwards;
	-webkit-animation: text-anime 1500ms alternate 1000ms forwards;
	animation: text-anime 1500ms alternate 1000ms forwards;
}
.p-andmore-main__ttl.active .in:nth-of-type(3) {
	-moz-animation: text-anime 1500ms alternate 1500ms forwards;
	-webkit-animation: text-anime 1500ms alternate 1500ms forwards;
	animation: text-anime 1500ms alternate 1500ms forwards;
}
.p-andmore-main__photo img {
	width: 100%;
}
/* .andmore-in {
	text-align: center;
} */
@media screen and (min-width: 1190px) {
	.p-andmore-main__photo img {
  width: 100vw;
  height: auto;
	}
}
.p-andmore-main__contents {
	margin-top: 50px;
}
@media screen and (min-width: 768px) {
	.p-andmore-main__contents {
			margin-top: 80px;
	}
}
.p-andmore-main__contents .contents-ttl {
	color: #9F764A;
	font-size: 20px;
	font-size: 1.25rem;
	margin-bottom: 20px;
	line-height: 1.6;
}
@media screen and (min-width: 768px) {
	.p-andmore-main__contents .contents-ttl {
			font-size: 24px;
			font-size: 1.5rem;
			margin-bottom: 40px;
	}
}
.p-andmore-main__contents .p-story-main__contents .c-basic-txt, .p-story-main__contents .p-basic-list__item, .p-story-main__contents .p-ol-list__item, .p-story-main__contents .p-ol-list--sub__item {
	color: #ffffff;
}
@media screen and (min-width: 768px) {
	.p-andmore-main__contents .p-story-main__contents .c-basic-txt, .p-story-main__contents .p-basic-list__item, .p-story-main__contents .p-ol-list__item, .p-story-main__contents .p-ol-list--sub__item {
			font-size: 18px;
			font-size: 1.125rem;
	}
}

/*[story-anime]の実行*/
@-moz-keyframes text-anime {
	0% {
			opacity: 0;
			bottom: 20px;
	}
	100% {
			opacity: 1;
			bottom: 0;
	}
}
@-webkit-keyframes text-anime {
	0% {
			opacity: 0;
			bottom: 20px;
	}
	100% {
			opacity: 1;
			bottom: 0;
	}
}
@keyframes text-anime {
	0% {
			opacity: 0;
			bottom: 20px;
	}
	100% {
			opacity: 1;
			bottom: 0;
	}
}
/*commitment===============*/
@media screen and (min-width: 768px) {
	.p-andmore-commitment {
			margin-bottom: 100px;
	}
}
.p-andmore-commitment__ttl {
	background: #E1DDD1;
	background: url(../images/common/wallpaper.jpg) center top;
	text-align: center;
	padding: 50px 0;
}

@media screen and (min-width: 768px) {
	.p-andmore-commitment__ttl {
			text-align: left;
			padding: 100px 0;
	}
	.p-andmore-commitment__ttl .re-ttl {
	text-align: right;
}
}
.p-andmore-commitment__ttl .ttl {
	color: #9F764A;
	margin-bottom: 30px;
	font-size: 20px;
	font-size: 1.25rem;
	line-height: 1.3;
}
@media screen and (min-width: 768px) {
	.p-andmore-commitment__ttl .ttl {
			margin-bottom: 50px;
			font-size: 40px;
			font-size: 2.5rem;
	}
}
.p-andmore-commitment__ttl .p-story-commitment__ttl .c-basic-txt, .p-story-commitment__ttl .p-basic-list__item, .p-story-commitment__ttl .p-ol-list__item, .p-story-commitment__ttl .p-ol-list--sub__item {
	color: #9F764A;
}
@media screen and (min-width: 768px) {
	.p-andmore-commitment__ttl .p-story-commitment__ttl .c-basic-txt, .p-story-commitment__ttl .p-basic-list__item, .p-story-commitment__ttl .p-ol-list__item, .p-story-commitment__ttl .p-ol-list--sub__item {
			font-size: 18px;
			font-size: 1.125rem;
	}
}
@media screen and (min-width: 768px) {
	.p-sandmore-commitment__box {
			display: -webkit-box;
			display: -webkit-flex;
			display: -moz-flex;
			display: -ms-flexbox;
			display: flex;
			-webkit-box-align: start;
			-ms-flex-align: start;
			-webkit-align-items: flex-start;
			-moz-align-items: flex-start;
			align-items: flex-start;
			margin-bottom: 100px;
	}
}
/* .p-andmore-commitment__box .photo {
	text-align: center;
	background: url(../images/common/wallpaper.jpg) center top;
} */
@media screen and (min-width: 768px) {
	.p-andmore-commitment__box .photo {
			width: 55%;
			text-align: right;
			background: #000;
	}
}
.p-andmore-commitment__box .photo img {
	vertical-align: bottom;
}
/* .p-andmore-commitment__box .contents {
	background: url(../images/common/wallpaper.jpg) center top;
	padding: 30px 20px;
} */
@media screen and (min-width: 768px) {
	.p-andmore-commitment__box .contents {
			width: 45%;
			padding: 100px 50px 50px;
			min-height: 500px;
	}
}
.p-andmore-commitment__box .contents .contents-ttl {
	color: #9F764A;
	margin-bottom: 20px;
	font-size: 18px;
	font-size: 1.125rem;
	line-height: 1.3;
}
@media screen and (min-width: 768px) {
	.p-andmore-commitment__box .contents .contents-ttl {
			font-size: 24px;
			font-size: 1.5rem;
			margin-bottom: 40px;
	}
}
.p-andmore-commitment__box .p-story-commitment__box .contents .c-basic-txt, .p-story-commitment__box .contents .p-basic-list__item, .p-story-commitment__box .contents .p-ol-list__item, .p-story-commitment__box .contents .p-ol-list--sub__item {
	color: #9F764A;
}
@media screen and (min-width: 768px) {
	.p-andmore-commitment__box .p-story-commitment__box .contents .c-basic-txt, .p-story-commitment__box .contents .p-basic-list__item, .p-story-commitment__box .contents .p-ol-list__item, .p-story-commitment__box .contents .p-ol-list--sub__item {
			font-size: 18px;
			font-size: 1.125rem;
	}
}
@media screen and (min-width: 768px) {
	.p-andmore-commitment__box {
		display: flex;
	}

	.p-andmore-commitment__box.reverse .photo {
			-webkit-box-ordinal-group: 3;
			-webkit-order: 2;
			-moz-order: 2;
			-ms-flex-order: 2;
			order: 2;
			text-align: left;
	}
}
.p-andmore-commitment__text {
	padding: 50px 0;
	text-align: left;
}
@media screen and (min-width: 768px) {
	.p-andmore-commitment__text {
			padding: 80px 0;
			text-align: center;
	}
}
.p-andmore-commitment__text .c-basic-txt, .p-andmore-commitment__text .p-basic-list__item, .p-andmore-commitment__text .p-ol-list__item, .p-andmore-commitment__text .p-ol-list--sub__item {
	color: #9F764A;
}
@media screen and (min-width: 768px) {
	.p-andmore-commitment__text .c-basic-txt, .p-andmore-commitment__text .p-basic-list__item, .p-andmore-commitment__text .p-ol-list__item, .p-andmore-commitment__text .p-ol-list--sub__item {
			font-size: 18px;
			font-size: 1.125rem;
	}
}

/*message===============*/
.p-andmore-message__ttl {
	background: #E1DDD1;
	color: #9F764A;
	padding: 50px 5px;
	font-size: 18px;
	font-size: 1.125rem;
	text-align: center;
}
@media screen and (min-width: 768px) {
	.p-andmore-message__ttl {
			padding: 200px 0;
			font-size: 40px;
			font-size: 2.5rem;
	}
}
.p-andmore-message__contents {
	padding: 50px 0;
}
@media screen and (min-width: 768px) {
	.p-andmore-message__contents {
			padding: 100px 0;
	}
}
.p-andmore-message__contents .ttl {
	margin-bottom: 50px;
	text-align: center;
	font-size: 18px;
	font-size: 1.125rem;
	color: #9F764A;
	line-height: 2;
}
@media screen and (min-width: 768px) {
	.p-andmore-message__contents .ttl {
			margin-bottom: 80px;
			font-size: 30px;
			font-size: 1.875rem;
	}
}
.p-andmore-message__contents .ttl .in {
	position: relative;
	display: block;
	opacity: 0;
}
.p-andmore-message__contents .ttl.active .in:nth-of-type(1) {
	-moz-animation: text-anime 1500ms alternate 500ms forwards;
	-webkit-animation: text-anime 1500ms alternate 500ms forwards;
	animation: text-anime 1500ms alternate 500ms forwards;
}
.p-andmore-message__contents .ttl.active .in:nth-of-type(2) {
	-moz-animation: text-anime 1500ms alternate 1000ms forwards;
	-webkit-animation: text-anime 1500ms alternate 1000ms forwards;
	animation: text-anime 1500ms alternate 1000ms forwards;
}
.p-andmore-message__contents .ttl.active .in:nth-of-type(3) {
	-moz-animation: text-anime 1500ms alternate 1500ms forwards;
	-webkit-animation: text-anime 1500ms alternate 1500ms forwards;
	animation: text-anime 1500ms alternate 1500ms forwards;
}
.p-andmore-message__contents .text .c-basic-txt, .p-andmore-message__contents .text .p-basic-list__item, .p-andmore-message__contents .text .p-ol-list__item, .p-andmore-message__contents .text .p-ol-list--sub__item {
	color: #9F764A;
	line-height: 2.5;
}
@media screen and (min-width: 768px) {
	.p-andmore-message__contents .text .c-basic-txt, .p-andmore-message__contents .text .p-basic-list__item, .p-andmore-message__contents .text .p-ol-list__item, .p-andmore-message__contents .text .p-ol-list--sub__item {
			font-size: 18px;
			font-size: 1.125rem;
	}
}