@font-face{
  font-family: 'NotoSansCJKjp-Medium';
  src: url('font/NotoSansCJKjp-Medium.otf');
}
body {
    height: 100%;
    margin: 0;
    font-feature-settings: 'palt';
    font-family: 'NotoSansCJKjp-Medium', 'Avenir','Helvetica Neue','Helvetica','Arial','ヒラギノ角ゴシック',YuGothic,'Yu Gothic','メイリオ', Meiryo,'ＭＳ Ｐゴシック','MS PGothic';
	  background: #fff;
}
ul{
  padding: 0;
}
.fadein-up {
    opacity : 0;
    transform : translate(0, 0);
    transition : all 1s;
}
.fadein-up.active{
    animation: fadeIn 0.7s cubic-bezier(0.33, 1, 0.68, 1) 1 forwards;
    animation-delay: .5s;
}
@keyframes fadeIn {
  0% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}

  .sp-on{
	display: none!important;
}
  .pad-on{
      display: none!important;
  }

/*anime*/
.fadein-up {
	opacity : 0;
	transform : translate(0, 0);
	transition : all 1s;
}
.fadein-up.active{
	animation: fadeIn 0.7s cubic-bezier(0.33, 1, 0.68, 1) 1 forwards;
	animation-delay: 1s;
}
@keyframes fadeIn {
  0% {
	opacity: 0;
	transform: translate(0, 30px);
  }
  100% {
	opacity: 1;
	transform: translate(0, 0);
  }
}
.popup1{
	width: 100%;
	display: block;
	opacity: 0;
}
.popup1.active{
	animation: popup 1s cubic-bezier(0.25, 1, 0.5, 1) 1 forwards;
	animation-delay: 0s;
}
.popup2{
	width: 100%;
	display: block;
	opacity: 0;
}
.popup2.active{
	animation: popup 1s cubic-bezier(0.25, 1, 0.5, 1) 1 forwards;
	animation-delay: 0.5s;
}
.popup3{
	width: 100%;
	display: block;
	opacity: 0;
}
.popup3.active{
	animation: popup 1s cubic-bezier(0.25, 1, 0.5, 1) 1 forwards;
	animation-delay: 1s;
}
.popup4{
	width: 100%;
	display: block;
	opacity: 0;
}
.popup4.active{
	animation: popup 1s cubic-bezier(0.25, 1, 0.5, 1) 1 forwards;
	animation-delay: 1.5s;
}
@keyframes popup {
  0% {
	transform: translateY(10%);
	opacity: 0;
  }
  100% {
	transform: translateX(0);
  }
  60%,100% {
	opacity: 1;
  }
}

/*header*/
#header{
	width: 100%;
	position: relative;
}
#header .logo{
	width: 200px;
	position: absolute;
	top: 0;
	left: 0;
	z-index: 1;
}
#header .tag{
  width: 15%;
  position: absolute;
	top: 0;
	right: 0;
  z-index: 1;
}
#header .tag img{
  width: 62%;
}
#header .title{
  width: 37%;
  position: absolute;
  top: 32%;
  margin: 0 auto;
  left: 10%;
  z-index: 1;
}
#header .header-text{
  display: flex;
  justify-content: space-between;
  position: absolute;
  top:70%;
  left: 10%;
  color: #fff;
  font-size: .8648vw;
  letter-spacing: 2px;
  line-height: 2em;
  z-index: 9;
}
#header .header-text p{
  margin-bottom: 2em;
}
#header .header-text div:nth-of-type(1){
  margin-right: 7vw;
}
#header .header-text div:nth-of-type(2){
  flex: 1;
  letter-spacing: 0;
}
.wrap{
	width: 100%;
	background: #fff;
	position: absolute;
	left: 0;
	z-index: 3;
	padding: 1% 0 0 0;
}
/*read*/
.read{
	width: 100%;
	max-width: 1000px;
	margin: 0 auto 7% auto;
}
.read .option{
  display: flex;
  justify-content: space-between;
  align-items: center;
  width: 80%;
  margin: 0 auto -5%;
}
.read .option li:nth-child(1){
  width: 32%;
  margin-left: 2%;
  margin-right: 8%;
}
.read .option li:nth-child(2){
  width: 23%;
  padding: 3%
}
.read .option li:nth-child(3){
  width: 23%;
  padding: 3%
}
.read .option img{
  width: 100%;
}
.read .read-list{
	width: 80%;
	margin: 0 auto 5% auto;
	padding: 14px;
  background: #eee562;
	box-sizing: border-box;
  text-align: center;
	color: #231815;
}
.read .read-list-inside{
  border: 2px solid #fff;
}
.read .read-list-inside img{
  display: block;
  width: 14%;
  margin: 5% auto;
}
.read .read-list-inside .title-img img{
  width: 40%;
  margin: 5% auto 3%;
}
.read .read-list-inside .title{
  font-size: 18px;
	letter-spacing: 4px;
	line-height: 2em;
  font-weight: bold;
}
.read .read-list-inside .txt{
  display: block;
  margin: 0 0 3% 0;
  font-size: 14px;
	letter-spacing: 1px;
	line-height: 1.8em;
	font-weight: bold;
}
.read .read-list-inside  ul{
  display: block;
  margin: 0 0 0 33%;
}
.read .read-list-inside  ul li{
  position: relative;
  margin-bottom: 1%;
  padding-left: 1.2em;
  text-align: left;
  font-size: 16px;
  font-weight: bold;
}
.read .read-list-inside  ul li::before{
  position: absolute;
  top: 1px;
  left: 0;
  content: '';
  display: inline-block;
  width: 16px;
  height: 16px;
  border-radius: 16px;
  background: #231815;
}
.read .read-list-inside .read-icon{
  display: flex;
  width: 46%;
  margin: 0 auto 5%;
}
.read .read-list-inside .read-icon img{
  width: 18%;
}
.read .img{
	width: 100%;
	margin: 0 0 5% 0;
}
.read .line{
	width: 100%;
	height: 2px;
	background: #fff;
	margin: 0 0 3px 0;
}

/*articles*/
.articles{
	width: 100%;
	max-width: 1000px;
	margin: 5% auto 7% auto;
	color: #3e3a39;
}
.articles .title{
	width: 70%;
	margin: 0 auto 5% auto;
  padding: 0 1em 2% 1em;
  border-bottom: 2px solid #000;
}
.articles .img{
	width: 50%;
	margin: 0 auto 2% auto;
}
.articles .txt{
	width: 40%;
	text-align: justify;
	font-size: 14px;
	letter-spacing: 2px;
	line-height: 1.8em;
	margin: 0 auto 0 auto;
}
.articles .sub-title{
  width: auto;
  margin: 0 auto 7%;
}
.articles .sub-title img{
  display: block;
  width: auto;
  height: 90px;
  margin: auto;
}
.articles .small-title{
  padding-bottom: 1%;
  border-bottom: 1px solid #717071;
}
.articles .small-title img{
  height: 18px;
}

.articles .col02 li{
  width: 47%;
}
.articles .col02 .sub-title{
  width: 90%;
  height: initial;
  margin: 6% auto;
}
.articles .col02 .sub-title img{
  height: 18px;
  margin: 0% auto 0 0;
}
.articles .col02-2 .txt{
  margin-top: 14%;
}
.articles .col02-2 .point img{
  height: 90px;
}
.articles .col02-2 li{
  margin-top: 5%;
}
/* articles1-2 */
.articles1-2 .title{
  width: 56%;
}
/* goods2_area */
.goods2_area{
  position: relative;
  width: 60%;
  margin: 0 auto 10%;
  max-width: 760px;
}
.goods2_area .point1{
  position: absolute;
  top: 0;
  left: 0;
  width: 40%;
  z-index: 1;
}
.goods2_area .point2{
  position: absolute;
  top: 0;
  right: -30%;
  width: 70%;
  z-index: 1;
}
.goods2_area .point3{
  position: absolute;
  bottom: -8%;
  left: 40%;
  width: 90%;
  z-index: 1;
}
.goods2_area .comments{
  position: absolute;
  bottom: 0;
  left: 2%;
  font-size: 10px;
}
.goods2_area .img{
  width: 100%;
  margin: auto;
  padding-top: 9%;
}
.goods2_area .sub-title{
  height: 90px;
  margin-bottom: 14%;
}
.goods2_area .txt{
  width: 95%;
  margin-left: 5%;
}
.goods2_area .txt span{
  display: block;
  margin-top: 5%;
  font-size: 12px;
  letter-spacing: 0;
}

/*articles02*/
.articles02{
	width: 100%;
	max-width: 1000px;
	margin: 0 auto 7% auto;
	color: #3e3a39;
}
.articles02 .title{
	width: 80%;
	margin: 0 auto 5% auto;
}
.articles02-list{
	width: 70%;
	display: flex;
	justify-content: space-between;
	align-items: center;
	margin: 0 auto 3% auto;
}
.articles02-list li:nth-child(1){
	width: 45%;
}
.articles02-list li:nth-child(2){
	width: 40%;
}
.articles02-list li .sub-title{
	width: 80%;
	margin: 0 0 7% 0;
}
.articles02-list li .txt{
	text-align: justify;
	font-size: 14px;
	letter-spacing: 2px;
	line-height: 1.8em;
}

/*articles03*/
.articles03{
	width: 100%;
	max-width: 1000px;
	margin: 0 auto 5% auto;
	color: #3e3a39;
}
.articles03 .txt{
  font-size: 1vw;
  letter-spacing: 1px;
  line-height: 1.8em;
}
.articles03 .col03{
  width: 70%;
	margin: 0 auto;
  padding: 2%;
}
.articles03 .col03 li:nth-child(1){
  width: 20%;
}
.articles03 .col03 li:nth-child(2){
  width: 72%;
  padding-right: 3%;
}
.articles03 .col03 li .col04 li{
  display: flex;
  width: 100%;
}
.articles03 .col03 li .col04 li:not(:last-of-type){
  margin-bottom: 5%;
}
.articles03 .col03 li .col04 li img{
  width: 40%;
  margin-right: 2%;
}
.articles03 .pink-frame{
  margin: 0;
}
.articles03 .pink-frame img {
  display: block;
  width: 70%;
  margin: auto;
}
.articles03 .pink-box{
  border-left: 1.5px solid rgba(218, 168, 168, 0.6);
  border-right: 1.5px solid rgba(218, 168, 168, 0.6);
  box-sizing: border-box;
  position: relative;
}
/*articles100*/
.articles100{
  width: 100%;
  padding: 5% 0;
  background-image: url("../img/01-bg.jpg");
  background-repeat: no-repeat;
  background-size: cover;
}
.articles100 img{
  width: 100%;
}
.articles100 .articles100_box{
  position: relative;
  display: flex;
  align-items: center;
  width: 100%;
  max-width: 960px;
  margin: auto;
}
.articles100 .item-color img{
  display: block;
  width: 86%;
  margin: auto;
}
.articles100 .content:nth-child(1){
  width: 40%;
  margin: 0 0 0 5%;
}
.articles100 .articles100_box .content p img{
  margin-bottom: 6%;
}
.articles100 .content:nth-child(2){
  width: 55%;
}
.articles100 .content:nth-child(2) img{
  width: 120%;
}
/* articles102 */
.articles102{
  position: relative;
}
.articles102 .item-color img{
  width: 76%;
}
.articles102 .content:nth-child(1){
  width: 45%;
  margin-right: 5%;
}
.articles102 .content:nth-child(2){
  width: 50%;
}
.articles102 .content:nth-child(2) img{
  width: 100%;
}
.articles102 .icon1{
  width: 10.5%;
  position: absolute;
  top: 46%;
  left: -1%;
}
.articles102 .icon2{
  width: 16%;
  position: absolute;
  bottom: -15%;
  right: 11%;
}
/* articles103 */
.articles103{
  margin: 0 auto;
}
.articles103 .txt{
  width: 100%;
  text-align: center;
}
.articles103 .sub-title{
  margin-bottom: 3%;
}

.col03{
	width: 80%;
	margin: 0 auto;
	display: flex;
	justify-content: space-between;
	align-items: center;
	color: #3e3a39;
}
.col03 li{
	width: 30%;
}

.col02{
	width: 80%;
	margin: 0 auto;
	display: flex;
	justify-content: space-between;
	color: #3e3a39;
}
.col02 li{
	width: 40%;
}
.col02 li.mt-4{
  margin-top: -4%;
}
.col02 li .sub-title{
	width: 100%;
	margin: 0 0 5% 0;
}
.col02 li .sub-title img{
	height: 45px;
	width: auto;
}
.col02 li .txt{
  width: 90%;
  margin: 3% auto 0;
	text-align: justify;
	font-size: 14px;
	letter-spacing: 2px;
	line-height: 1.8em;
}
.col02 li .img{
	width: 100%;
	margin: 0 auto;
}
.col02-2{
  align-items: center;
  margin-bottom: 8%;
}

/*item-link*/
.item-link{
	width: 380px;
	margin: 12% auto 7% 0;
	display: block;
	text-decoration: none;
	border: 1px solid #fff;
	background: #fff;
	transition: .3s;
}
.item-link:hover{
	background: #daa8a8;
	transition: .3s;
}
.item-link img{
  width: auto;
  height: 50px;
}
.item-link .item-link-in{
	width: 100%;
  height: 54px;
	display: flex;
	justify-content: flex-start;
	align-items: center;
  margin: 0;
  padding: 0;
}
.item-link .item-link-in li:first-child{
  flex: 1;
	text-align: center;
	font-size: 16px;
	letter-spacing: 2px;
	color: #daa8a8;
}
.item-link:hover .item-link-in li:first-child{
	color: #fff;
}
.item-link .item-link-in li:last-child{
	border-left: 1px solid #daa8a8;
}
/* howto */
.howto .small-title{
  margin-bottom: 3%;
}
/*line-up*/
.line-up{
	width: 100%;
	max-width: 1000px;
	margin: 0 auto 10% auto;
	color: #3e3a39;
}
.line-up .title{
	width: 100%;
	border-bottom: 1px solid #3e3a39;
	margin: 0 0 5% 0;
}
.line-up .title span{
	width: 100%;
	display: block;
	border-bottom: 1px solid #3e3a39;
	margin: 0 0 2px 0;
}
.line-up .title img{
	height: 20px;
	margin: 0 0 2% 0;
}
.line-up-col04{
	width: 94%;
  margin: auto;
	display: flex;
	justify-content: space-between;
  align-items: center;
  margin-top: -60px;
}
.line-up-col04 li{
	width: 20%;
}
.line-up li:nth-child(1){
  width: 19%;
}
.line-up li:nth-child(2){
  width: 15%;
}
.line-up li:nth-child(3){
  width: 22%;
}
.line-up li:nth-child(4){
  width: 20%;
}
.line-up li:nth-child(4) img{
  margin-top: 60px;
}
/*line-up2*/
.line-up2{
  max-width: 1000px;
}
.line-up2 li:nth-child(1){
  width: 24%;
}
.line-up2 li:nth-child(2){
  width: 22%;
}
.line-up2 li:nth-child(3){
  width: 10%;
}
.line-up2 li:nth-child(4){
  width: 12%;
}
.line-up2 li:nth-child(4) img{
  margin-top: 0;
}
.line-up .line-up-col04{
  margin-top: -20px;
}

/*function*/
.function{
	width: 100%;
	max-width: 1000px;
	margin: 0 auto 5% auto;
	color: #3e3a39;
}
.function img{
  width: 100%;
}
.function .function-list00{
  display: flex;
}
.function .function-list00 li:nth-child(1){
  width: 70%;
  margin-right: 10%;
}
.function .function-list00 li:nth-child(2){
  width: 20%;
}
.function .title{
	border-bottom: 1px solid #3e3a39;
	font-size: 21px;
	letter-spacing: 2px;
	padding: 0% 3% 1% 3%;
	margin: 0 0 3% 0;
}
.function .function-list01{
	width: 94%;
	margin: 0 auto 5% auto;
}
.function .function-list01 li{
	width: 100%;
	display: flex;
	justify-content: space-between;
	font-size: 14px;
	letter-spacing: 2px;
	line-height: 3em;
}
.function .function-list01 li:nth-child(1),
.function .function-list01 li:nth-child(2){
  width: 100%;
}
.function .function-list01 li .name{
	width: 31%;
}
.function .function-list01 li .data{
	width: 66%;
	text-align: left;
}
/* function2 */
.function2 .function-list00 li:nth-child(1){
  margin-right: 2%;
}
.function .function-list01 li:nth-child(2){
  width: initial;
}

@media screen and (min-width: 767px) and (max-width: 1200px) {
  .articles, .line-up, .function{
    width: 90%;
    max-width: 1000px;
    padding: 0 5%;
  }
  .articles102 .icon1{
    left: 0;
  }
}

@media screen and (min-width: 767px) and (max-width: 950px) {
  header .mv-box img{
    object-position: 64% 100%;
  }
}

@media (min-width:0px) and ( max-width:767px) {
	.pc-on{
		display: none !important;
	}
  .sp-on{
    display: block !important;
  }

	#header .logo{
		width: 45%;
	}
  #header .tag{
    display: none;
  }
	#header .title{
		width: 80%;
		top: 12vh;
		left: 0;
		right: 0;
	}
  #header .header-text{
    display: block;
    position: relative;
    font-size: 2.8vw;
    font-weight: bold;
    line-height: 2;
  }
  #header .header-text div:nth-of-type(1) {
    position: absolute;
    top: 34vh;
    margin-right: 0;
  }
  #header .header-text div:nth-of-type(2) {
    position: absolute;
    top: 68vh;
    line-height: 1.6;
  }
  #header .header-text p{
    margin-bottom: 5%;
  }
  #header .mv-box img{
    height: 87vh;
    object-position: center bottom;
    object-fit: cover;
  }

	.wrap{
    position: relative;
    padding-top: 4vh;
    background-color: #fff;
	}
  .wrap .option .icon{
    position: absolute;
    top: -37px;
    right: 5vw;
  }
  .wrap .option .icon img{
    position: relative;
  }
  .option .icon{
    margin: 0;
    padding: 0;
  }
  .option .icon img{
    margin-left: auto;
    margin-right: 4vw;
    display: block;
  }
	/*read*/
	.read{
    margin: 0 auto 14% auto;
	}
  .read .option ul{
    width: calc(100% + 16%);
    margin: 12% -8% 0;
    padding: 0;
  }
  .read .option li:nth-child(1),
  .read .option li:nth-child(2){
    display: inline-block;
    width: 46%;
    margin: 0;
    padding: 0;
  }
  .read .option li:nth-child(1){
    margin-right: 3%;
  }
  .read .option li:nth-child(2){
    margin-left: 3%;
  }
	.read .read-list{
		width: 90%;
		padding: 2%;
		box-sizing: border-box;
		margin: 0 auto 5% auto;
	}
  .read .read-list-inside{
    padding: 5% 5% 0 5%;
    border: 1px solid #fff;
  }
  .read .read-list-inside img{
    width: 32%;
  }
  .read .read-list-inside .title-img img{
    width: 80%;
  }
  .read .read-list-inside .title{
    margin: 5% auto 12%;
    font-size: 3.8vw;
    line-height: 1.8;
    letter-spacing: 0.2rem;
  }
  .read .read-list-inside .txt{
    width: 94%;
    margin: 6% auto;
    font-size: 13px;
    text-align: left;
    font-weight: normal;
  }
  .read .read-list-inside ul{
    width: 100%;
    margin-left: 3%;
  }
  .read .read-list-inside ul li{
    margin-bottom: 2%;
    font-size: 14px;
  }
  .read .read-list-inside ul li::before{
    width: 12px;
    height: 12px;
    top: 2px;
  }
  .read .read-list-inside .read-icon{
    width: 100%;
    margin-bottom: 0;
  }
  .read .read-list-inside .read-icon img{
    width: 20%;
  }
  /*articles100*/
  .articles100{
    padding: 12% 0;
    background-image: url("../img/01-bg-sp.jpg");
  }
  .articles100{
    padding: 12% 0;
    background-image: url("../img/01-bg-sp.jpg");
  }
  .articles100 .articles100_box{
    display: block;
  }
  .articles100 .content:nth-child(1){
    width: 80%;
    margin: auto;
  }
  .articles100 .content .content{
    width: 90vw;
    margin: -15% -5vw -20%;
  }
  .articles100 .item-color img{
    width: 120%;
    margin: 0 auto;
  }

	/*articles*/
  .articles{
    width: 90%;
    margin: 8% auto 10% auto;
	}
  .articles .img{
    width: 80%;
    margin: 0 auto 3% auto;
  }
  .articles .txt{
    width: 70%;
    text-align: justify;
    font-size: 13px;
    letter-spacing: 2px;
    line-height: 1.8em;
    margin: 0 auto 0 auto;
  }
  .articles .title{
    width: 90%;
    margin: 0 auto 7% auto;
    padding: 0 0 5% 0;
	}
  .articles .sub-title{
    margin: 0 auto -7%;
  }
  .articles .sub-title img{
    width: auto;
    height: 14vw;
    margin: 0 auto 0 5%;
  }
  .articles .sub-title span{
    display: block;
    margin: 1% 10% 14%;
    text-align: right;
    font-size: 10px;
  }
  .articles .col02-2 .point{
    margin-bottom: 10%;
  }
  .articles .col02-2 .point img{
    width: auto;
    height: 14vw;
    margin: 0 auto 0 0;
  }
  .articles .col02-2 .txt{
    margin-top: 6%;
  }
  .articles .col02 li{
    width: 100%;
  }
  .articles .col02 .sub-title{
    width: 100%;
  }
  .articles .col02 .sub-title img{
    height: 14px;
    margin: 0 auto;
  }
  .articles .small-title {
    width: 88%;
    margin: auto;
    padding-bottom: 4%;
  }
  .articles .small-title img {
    height: 3.6vw;
  }
  /* articles1-2 */
  .articles1-2 .icon2 img{
    display: block;
    width: 60%;
    margin: 0 auto 12%;
  }
  /* articles102 */
  .articles102 .content .content {
    width: 100vw;
    margin: 0 -10vw 0;
  }
  .articles102 .articles100_box .goods2 p img{
    display: block;
    width: 80%;
    margin: auto;
  }
  .articles102 .item-color{
    width: 80%;
    margin: auto;
  }
  .articles102 .icon1 {
    width: 26%;
    top: 28%;
    left: 5%;
  }
  /* articles103 */
  .articles103 .txt{
    width: 80%;
    margin: 16% auto -4%;;
  }

	/*articles02*/
	.articles02{
		width: 100%;
		margin: 0 auto 10% auto;
		color: #3e3a39;
	}
	.articles02 .title{
		width: 80%;
		margin: 0 auto 5% auto;
	}
	.articles02-list{
		width: 80%;
		margin: 0 auto 3% auto;
	}
	.articles02-list li:nth-child(1){
		width: 100%;
		margin: 0 0 10% 0;
	}
	.articles02-list li:nth-child(2){
		width: 100%;
	}
	.articles02-list li .sub-title{
		width: 80%;
		margin: 0 0 7% 0;
	}
	.articles02-list li .img{
		width: 100%;
		margin: 0 0 5% 0;
	}
	.articles02-list li .txt{
		text-align: justify;
		font-size: 13px;
		letter-spacing: 2px;
		line-height: 1.8em;
	}

	/*articles03*/
	.articles03{
    margin: 0 auto;
	}
  .articles03 .pink-frame{
    margin: 0;
  }
  .articles03 .pink-frame img{
    width: 80%;
  }
  .articles03 .pink-frame:last-of-type{
    margin-bottom: 14%;
  }
  .articles03 .pink-box{
    flex-direction: column;
    width: 80%;
    padding: 5% 5% 3% 5%;
    border-left: 1px solid rgba(218, 168, 168, 0.8);
    border-right: 1px solid rgba(218, 168, 168, 0.6);
  }
  .articles03 .col03 li .col04 li{
    flex-direction: column;
  }
  .articles03 .col03 li:nth-child(1){
    width: 72%;
    margin-bottom: 16%;
  }
  .articles03 .col03 li:nth-child(2){
    width: 100%;
    left: 0;
    padding-right: 0;
  }
  .articles03 .col03 li .col04 li:not(:last-of-type) {
    margin-bottom: -3%;
  }
  .articles03 .col03 .col04{
    width: 60vw;
    margin: auto;
    padding: 0;
  }
  .articles03 .col03 li .col04 li img{
    width: 100%;
    margin-right: 0;
    margin-bottom: 6%;
  }
  .articles03 .col03 li .col04 .txt{
    margin-bottom: 8%;
    font-size: 13px;
    letter-spacing: 1px;
    line-height: 1.8em;
  }
  .articles03 .col02{
    width: 80%;
    flex-direction: column;
  }
  .articles03 .col02 li:first-child {
    -webkit-box-ordinal-group: 2;
    -ms-flex-order: 2;
    -webkit-order: 2;
    order: 2;
  }
  .articles03 .col02 li.mt-4{
    margin: 0 auto 15%;
    -webkit-box-ordinal-group: 1;
    -ms-flex-order: 1;
    -webkit-order: 1;
    order: 1;
  }
  .articles03 .col02-2 li:first-child{
    -webkit-box-ordinal-group: 1;
    -ms-flex-order: 1;
    -webkit-order: 1;
    order: 1;
  }
  .articles03 .col02-2 li:last-child{
    -webkit-box-ordinal-group: 2;
    -ms-flex-order: 2;
    -webkit-order: 2;
    order: 2;
  }
  .articles03 .col02-2 li img{
    width: 80%;
    margin: 0 auto 5%;
  }
  /* goods2_area */
  .goods2_area .point1{
    position: initial;
    width: 100%;
  }
  .goods2_area .sub-title{
    height: initial;
    margin-bottom: 0;
  }
  .goods2_area .txt{
    width: 80%;
    margin-top: 5%;
  }
  .goods2-3 .col02 li:first-child{
    margin-bottom: 0;
  }

	.col03{
		width: 70%;
		margin: 0 auto;
		color: #3e3a39;
	}
	.col03 li{
		width: 100%;
		margin: 0 0 10% 0;
	}
	.col03 li:nth-child(2){
		width: 100%;
		position: relative;
		left: -10%;
		margin: 0 0 10% 0;
	}
	.col03 li:last-child{
		width: 100%;
		margin: 0 0 0% 0;
	}
  .col02{
		width: 90%;
    padding: 0;
    flex-direction: column;
	}
   .col02 li{
		width: 100%;
	}
	.col02 li:first-child{
		width: 100%;
		margin: 0 0 10% 0;
	}
	.col02 li .sub-title{
		width: 100%;
		margin: 0 0 5% 0;
	}
	.col02 li .sub-title img{
		height: 40px;
		width: auto;
	}
	.col02 li .txt{
		font-size: 13px;
		margin: 6% auto 0;
	}
	.col02 li .img{
		width: 100%;
	}

	/*item-link*/
	.item-link{
		width: 100%;
		margin: 17% auto 4%;
		display: block;
		text-decoration: none;
		border: 1px solid #fff;
		background: #fff;
		transition: .3s;
	}
	.item-link:hover{
		background: #daa8a8;
		transition: .3s;
	}
	.item-link .item-link-in{
		width: 100%;
		display: flex;
		justify-content: flex-start;
		align-items: center;
	}
	.item-link .item-link-in li:first-child{
		width: 85%;
		text-align: center;
		font-size: 16px;
		letter-spacing: 2px;
		color: #daa8a8;
	}
	.item-link:hover .item-link-in li:first-child{
		color: #fff;
	}
	.item-link .item-link-in li:last-child{
		border-left: 1px solid #daa8a8;
	}
  .howto .small-title{
    margin-bottom: 12%;
  }
  .line-up{
    margin-top: 14%;
  }
  .line-up-col04{
    flex-wrap: wrap;
    align-items: flex-end;
    width: 90%;
    margin: auto;
    padding: 0;
  }
  .line-up-col04 li{
    width: 50% !important;
    margin-bottom: 12%;
  }
  .line-up-col04 li:nth-child(1) img{
    width: 76%;
    margin: auto;
    padding-bottom: 7%;
  }
  .line-up-col04 li:nth-child(2) img{
    width: 62%;
    margin: auto;
  }
  .line-up-col04 li:nth-child(3) img{
    width: 90%;
    margin: auto;
  }
  .line-up-col04 li:nth-child(4) img{
    width: 82%;
    margin: auto;
  }
  .line-up2 .line-up-col04{
    align-items: center;
  }
  .line-up2 li:nth-child(1) img{
    width: 76%;
    margin: auto;
  }
  .line-up2 li:nth-child(2) img{
    width: 62%;
    margin: auto;
  }
  .line-up2 li:nth-child(3) img{
    width: 32%;
    margin: auto;
  }
  .line-up2 li:nth-child(4) img{
    width: 38%;
    margin: auto;
  }

	/*function*/
  .function{
    width: 90%;
    margin: 0 auto 14%;
    padding-bottom: 2vh;
  }
  .function .function-list00{
    display: block;
    padding: 0;
  }
  .function .title{
    font-size: 3.7vw;
    padding-bottom: 8%;
    line-height: 2;
	}
  .function img{
    display: block;
    width: 40%;
    margin: 0 0 0 auto;
  }
  .function .function-list01{
    padding: 0;
  }
  .function .function-list00 li:nth-child(1){
    width: 100%;
    margin: auto;
  }
  .function .function-list01 li{
    display: block;
  }
  .function .function-list01 li .name, .function .function-list01 li .data{
    width: 100%;
    font-size: 13px;
    line-height: 1.8;
  }
  .function .function-list01 li .data{
    line-height: 1.6;
    margin-bottom: 5%;
  }
  .function2 img{
    width: 42%;
  }

}

@media screen and (min-width: 380px) and (max-width: 767px){
  #header .mv-box img {
    height: 87vh;
    object-position: 0 90%;
    object-fit: cover;
  }
  #header .logo{
    width: 180px;
  }
  #header .title{
    width: 300px;
    top: 100px;
    left: 0;
    right: 0;
    margin-left: 10%;
  }
  #header .header-text{
    font-size: 12px;
  }
  #header .header-text div:nth-of-type(1){
    top: 260px;
  }
  #header .header-text div:nth-of-type(2){
    top: 390px;
  }
}

/* 【iPad 縦向きのみ】 */
@media only screen and (min-device-width: 768px) and (max-device-width: 1024px) and (orientation:portrait){
  #header .mv-box img{
    object-position: 74% 100%;
  }
  #header .title{
    top: 26%;
  }
  #header .header-text{
    top:60%;
    flex-direction: column;
    font-size: 16px;
  }
  .articles100 .articles100_box{
    width: 96%;
    margin: auto;
  }
}