@charset "utf-8";@charset "utf-8";

/* ===================================
    全体レイアウト用
==================================== */
#Area {
	font-family: "Helvetica", sans-serif;
	text-align: center;
	color:#333333;
	width: 100%;
	margin: 0 auto 100px;
	display: block;
	overflow: hidden;
}

.backcolor {
	background-image: url(/photo/page/20250822/back-1.jpg);
}

.mainimage {
	width: 100%;
	display: block;
	text-align: center;
	margin: 0 auto;
}

/*スマホの時だけ改行*/
.br-sp {
    display: none;
}

/* 余白*/
.spece {
 margin-bottom:3%;
}	

.spece2 {
    padding-top: 10%;
    text-align: center;
}	

.image {
	text-align: center;
}


/* デフォルト（PC・タブレット）＝PCバナー */
#Area .mainimage img.pc_only { display: block; }
#Area .mainimage img.sp_only { display: none; }

/* スマホだけSPバナー */
@media (max-width: 480px) {
  #Area .mainimage img.pc_only { display: none; }
  #Area .mainimage img.sp_only { display: block; }
}

/* ===================================
    メインイメージ部分用
==================================== */
.top_text {
	width: 100%;
	height:auto;
	margin-top: 5%;
}

.top_text_01 {
	font-size: 15px;
	line-height: 2.5;
	margin: 10% auto;
}

/* ===================================
    新しいコンテナー
==================================== */

.container_frame {
	margin: 0 auto;
    max-width: 900px;
    text-align: center;
	margin-bottom: 10%;
}

.container_01,.container_02,.container_03,.container_04,.container_05
{
	max-width: 90%;
    text-align: center;
    margin: 0 auto;
}

.container_01 {  display: grid;
grid-template-columns: 32% 32% 32%;
    grid-template-rows: 27% 27% 27%;
    gap: 3% 2%;
	grid-auto-flow: row;
  grid-template-areas:
    "img1-1 img1-2 img1-3"
    "moving-1 img1-4 img1-5"
    "moving-1 img1-6 img1-7";
}

.img1-1 { grid-area: img1-1; }
.img1-2 { grid-area: img1-2; }
.img1-3 { grid-area: img1-3; }
.moving-1 { grid-area: moving-1; }
.img1-4 { grid-area: img1-4; }
.img1-5 { grid-area: img1-5; }
.img1-6 { grid-area: img1-6; }
.img1-7 { grid-area: img1-7; }


/*html, body , .container782 {
  height: 100%;
  margin: 0;
}*/


.container_02 {  display: grid;
grid-template-columns: 32% 32% 32%;
    grid-template-rows: 27% 27% 27%;
    gap: 3% 2%;
	grid-auto-flow: row;
  grid-template-areas:
    "img2-1 img2-2 moving-2"
    "img2-3 img2-4 moving-2"
    "img2-5 img2-6 img2-7";
}

.img2-1 { grid-area: img2-1; }
.img2-2 { grid-area: img2-2; }
.img2-3 { grid-area: img2-3; }
.img2-5 { grid-area: img2-5; }
.img2-4 { grid-area: img2-4; }
.img2-6 { grid-area: img2-6; }
.moving-2 { grid-area: moving-2; }
.img2-7 { grid-area: img2-7; }


.container_03 {  display: grid;
grid-template-columns: 32% 32% 32%;
    grid-template-rows: 27% 27% 27%;
    gap: 3% 2%;
	grid-auto-flow: row;
  grid-template-areas:
    "img3-1 moving-3 img3-2"
    "img3-3 moving-3 img3-4"
    "img3-5 img3-6 img3-7";
}

.img3-1 { grid-area: img3-1; }
.img3-2 { grid-area: img3-2; }
.img3-3 { grid-area: img3-3; }
.img3-4 { grid-area: img3-4; }
.img3-5 { grid-area: img3-5; }
.img3-6 { grid-area: img3-6; }
.img3-7 { grid-area: img3-7; }
.moving-3 { grid-area: moving-3; }



.container_04 {  display: grid;
grid-template-columns: 32% 32% 32%;
    grid-template-rows: 27% 27% 27%;
    gap: 3% 2%;
	grid-auto-flow: row;
  grid-template-areas:
    "img4-1 img4-2 img4-3"
    "img4-4 img4-5 moving-4"
    "img4-6 img4-7 moving-4";
}

.img4-1 { grid-area: img4-1; }
.img4-2 { grid-area: img4-2; }
.img4-3 { grid-area: img4-3; }
.img4-4 { grid-area: img4-4; }
.img4-5 { grid-area: img4-5; }
.img4-6 { grid-area: img4-6; }
.img4-7 { grid-area: img4-7; }
.moving-4 { grid-area: moving-4; }

.container_05 {  display: grid;
grid-template-columns: 32% 32% 32%;
    grid-template-rows: 27% 27% 27%;
    gap: 3% 2%;
	grid-auto-flow: row;
  grid-template-areas:
    "img5-1 img5-2 img5-3"
    "img5-4 moving-5 img5-5"
    "img5-6 moving-5 img5-7";
}

.img5-1 { grid-area: img5-1; }
.img5-2 { grid-area: img5-2; }
.img5-3 { grid-area: img5-3; }
.img5-4 { grid-area: img5-4; }
.img5-5 { grid-area: img5-5; }
.img5-6 { grid-area: img5-6; }
.img5-7 { grid-area: img5-7; }
.moving-5 { grid-area: moving-5; }


.title {
		font-size: 28px;
	margin-bottom: 1%;
	color: #04451e;
	}

/* ===================================
    ピックアップイメージ
==================================== */
.pickup_image {
	margin-bottom: 8%;
	 position: relative;
	}

.pickup_image_01,.pickup_image_02,.pickup_image_03,.pickup_image_04,.pickup_image_05,.pickup_image_06,.pickup_image_07,.pickup_image_08,.pickup_image_09,.pickup_image_10,.pickup_image_11,.pickup_image_12,.pickup_image_13,.pickup_image_14,.pickup_image_15 {
	text-align: center;
	margin: 0 auto;
}

.pickup_image_01 {
	width: 37%;
	margin-left: 18%;
}

.pickup_image_02 {
	width: 38%;
	margin-right: 10%;
    margin-top: -25%;
}

.pickup_image_03 {
	width: 35%;
	margin-left: 27%;
    margin-top: -16%;
}

.pickup_image_04 {
	width: 40%;
    margin-right: 13%;
    position: relative;
    z-index: 10;
}

.pickup_image_05 {
	width: 35%;
    margin-left: 18%;
    margin-top: -25%;
    position: relative;
    z-index: 1;
}

.pickup_image_06 {
	width: 33%;
    margin-right: 20%;
    margin-top: -16%;
    position: relative;
    z-index: 5;
}

.pickup_image_07 {
    width: 40%;
    margin-right: 15%;
}

.pickup_image_08 {
	width: 38%;
    margin-left: 14%;
    margin-top: -37%;
    position: relative;
    z-index: 5;
}

.pickup_image_09 {
	width: 34%;
    margin-right: 19%;
    margin-top: -6%;
    position: relative;
    z-index: 1;
}

.pickup_image_10 {
	width: 35%;
    margin-left: 19%;
    position: relative;
    z-index: 10;
}

.pickup_image_11 {
	width: 38%;
    margin-right: 10%;
    margin-top: -25%;
    position: relative;
    z-index: 5;
}

.pickup_image_12 {
	width: 35%;
    margin-left: 21%;
    margin-top: -14%;
    position: relative;
    z-index: 1;
}

.pickup_image_13 {
	    width: 37%;
    margin-right: 14%;
    position: relative;
    z-index: 10;

}

.pickup_image_14 {
	width: 42%;
    margin-left: 12%;
    margin-top: -25%;
    position: relative;
    z-index: 1;

}

.pickup_image_15 {
width: 34%;
    margin-right: 15%;
    margin-top: -16%;
    position: relative;
    z-index: 5;
}





/* ===================================
    画像の＋表示
==================================== */

.plus {
    position: absolute;
    top: 240px;
    right: 5px;
    font-size: 25px;
    z-index: 99;
    color: #333333;
    /*font-family: "Helvetica", "Arial";*/
	font-weight: 300;
}

.img1-1,.img1-2,.img1-3,.img1-4,.img1-5,.img1-6,.img1-7,
.img2-1,.img2-2,.img2-3,.img2-4,.img2-5,.img2-6,.img2-7,
.img3-1,.img3-2,.img3-3,.img3-4,.img3-5,.img3-6,.img3-7,
.img4-1,.img4-2,.img4-3,.img4-4,.img4-5,.img4-6,.img4-7,
.img5-1,.img5-2,.img5-3,.img5-4,.img5-5,.img5-6,.img5-7
{
    margin: 0px 0 25px;
    position: relative;
}

/* ===================================
    全身写真のモーション
==================================== */

.moving-1,.moving-2,.moving-3,.moving-4,.moving-5 {
  width: 100%;
        position: relative;
        margin-top: 1%;
}

.movingimg {
  position: absolute;
  top: 24px;
  left: 0;
  bottom: 0;
  right: 0;
  opacity: 0;
  background-size: cover;
  background-position: center center;
  
  animation: image-switch-animation 12s infinite;
}

.movingimg:nth-of-type(1) {
  animation-delay: 0s;
}
.movingimg:nth-of-type(2) {
  animation-delay: 3s;
}
.movingimg:nth-of-type(3) {
  animation-delay: 6s;
}
.movingimg:nth-of-type(4) {
  animation-delay: 9s;
}
.movingimg:nth-of-type(5) {
  animation-delay: 12s;
}

@keyframes image-switch-animation {
  0%{ opacity: 0;}
  5%{ opacity: 1;}
  25%{ opacity: 1;}
  30%{ opacity: 0;}
  100%{ opacity: 0;}
}

@media (max-width: 600px) {
    .br-sp {
        display: block;
    }
}


/* ===================================
    カテゴリーリスト
==================================== */
itemlist_782 {
    margin: 0 auto;
    max-width:  900px;
    text-align: center;
    height: 20%;
    margin-top: 10%;
    margin-bottom: 7%;
	
}

.text04_782 {
    font-size: 22px;
    margin: 8% 0 4% 0%;
    text-align: center;
}

.text04_782 span {
	font-size: 14px;
	color: #c65572;
	vertical-align: 9%;
}

li a:hover {
	color: #c65572;
}


ul.upper,ul.bottom {
	display: flex;
	max-width: 920px;
    margin: 0 auto;
	border-top: 1px solid gray;
	padding-top: 2%;
}

ul.bottom {
	border-bottom: 1px solid gray;
	margin-bottom: 10%;
}

.itemlist_782 ul li {
	margin-bottom: 1em;
	ine-height: 1.7;
	flex: auto;
	font-size: 18px;
	/*background-color: aqua;*/
	 text-align: center;
	border-right: 1px solid gray;
}

li.upper:last-child,li.bottom:last-child {
	border: none
}

/* ==============================
    コンテンツ-アイテムタイトル
============================== */
.border_1 {
	border-top: 1px solid #d1cbc2;
	width: 80%;
	margin: 10% auto 9% auto;
}


/* ==============================
  メインテキスト
=============================== */

.maintext {
	font-size: 15px;
    width: 54%;
    text-align: left;
    margin: 0 auto;
    margin-bottom: 5%;
    margin-top: -14%;
	font-weight: 400;
}




/* ===================================
    コーディネートのコンテンツ
==================================== */

.container_frame_02 {  
	display: grid;
  grid-template-columns: 48.5% 48.5%;
  /*grid-template-rows: 500px;*/
  gap: 10px 20px;
  grid-auto-flow: row;
  grid-template-areas:
    "coordinate-1 coordinate-2";
	margin: 2% auto 4% auto;
    max-width: 820px;
	/*background-color: aqua;*/
}

.coordinate-1 { grid-area: coordinate-1; }

.coordinate-2 { grid-area: coordinate-2; }


.title-2{
	font-size: 27px;
	font-family: "roma-shaded", sans-serif;
	font-weight: 400;
	font-style: normal;
}

/* ===================================
    画像のCHECKの表示
==================================== */

.check {
    position: absolute;
    top: 470px;
    right: 10px;
    font-size: 16px;
    z-index: 99;
    color: #333333;
	font-family: "roma-shaded", sans-serif;
	font-weight: 200;
	font-style: normal;
}

.coordinate-1,.coordinate-2
{
    margin: 0px 0 25px;
    position: relative;
}


/*===================================
ボタン系
===================================*/

.btn_buy3_782 {
    text-align: center;
    text-decoration: none;
    width: 25%;
    margin: auto auto 4% auto;
    border-radius: 0.3rem;
    border-image-source: repeating-linear-gradient(45deg, #d97f99 0, #d97f99 6px, rgba(0, 0, 0, 0) 6px, rgba(0, 0, 0, 0) 8px);
    border-image-slice: 3;
    border-width: 1.5px;
    border-image-repeat: round;
    border-style: solid;
    color: #d97f99;
    font-size: 15px;
    font-weight: normal;
}

.btn_buy3_782:hover {
	border: 1.5px solid #d97f99;
	color: #d97f99;
}

.btn_01 {
    text-align: center;
    vertical-align: middle;
    text-decoration: none;
    width: 20px;
    margin: 10%;
    padding: 0.5rem 2rem;
    font-weight: bold;
    border: 1px solid #202020;
   /*background: #202020;*/
    color: #000;
    transition: 0.5s;
    font-size: 12px;
}

.btn_02 {
    align-items: center;
    background: #fff;
    border: 1px solid #1b6288;
    box-sizing: border-box;
    width: 200PX;
    padding: 1.5% 10% 1.5% 10%;
    color: #1b6288;
    font-size: 17px;
    text-align: left;
    text-decoration: none;
}

.btn_02:hover {
	color: #78a8ba;
	background: #fff;
}

.btn_02 span {
    color: #1b6288;
}


.btn_03 {
 display: block;
    text-align: center;
    vertical-align: middle;
    text-decoration: none;
    width: 300px;
    margin: 3% auto 4% auto;
    padding: 1rem 4rem;
    font-weight: bold;
    border: 1.5px solid #77a5bc;
    background: #77a5bc;
    color: #fff;
    border-radius: 100vh;
    transition: 0.5s;
    font-size: 16px;
}

.btn_03:hover {
	color: #78a8ba;
	background: #fff;
}


a.btn_04 {
 display: block;
    text-align: center;
    vertical-align: middle;
    text-decoration: none;
    width: 120px;
    margin: 6% auto 0% 63%;
    padding: 0.5rem 0.5rem;
    font-weight: bold;
    border: 1.5px solid #77a5bc;
    background: #77a5bc;
    color: #fff;
    border-radius: 100vh;
    transition: 0.5s;
    font-size: 14px;
}

.btn_04:hover {
	color: #78a8ba;
	background: #fff;
}


.btn_05 {
 display: block;
    text-align: center;
    vertical-align: middle;
    text-decoration: none;
    width: 300px;
    margin: 5% auto 9% auto;
    padding: 1rem 1rem;
    font-weight: bold;
    border: 1.5px solid #77a5bc;
    background: #77a5bc;
    color: #fff;
    border-radius: 100vh;
    transition: 0.5s;
    font-size: 16px;
}

a.btn_05:hover {
	color: #78a8ba;
	background: #fff;
}


.btn_buy_1{  
    width: 22%;
    padding: 5px 0;
    margin-left: 38%;
    margin-bottom: 10%;
    font-weight: bold;
    border: 1.5px solid #d97f99;
    color: #d97f99;
    border-radius: 100vh;
    transition: 0.5s;
}

.btn_buy_1:hover {
	color: #fff;
	background: #d97f99;
}



/*黒細ライン＆ホバーグレー*/
a.btn_06 {
display: flex;
    justify-content: center;
    align-items: center;
    background: #E0DBD7;
    border: 1px solid #04451e;
    box-sizing: border-box;
    width: 400px;
    height: 60px;
    padding: 0 6% 0 6%;
    color: #04451e;
    font-size: 15px;
    text-align: left;
    text-decoration: none;
    position: relative;
    transition-duration: 0.2s;
    margin: 0 auto;
}

a.btn_06:hover {
  background: #04451e;
  color: #fff;
}

a.btn_06:before {
  content: "";
  display: inline-block;
  width: 0;
  height: 0;
  border-style: solid;
  border-width: 7px 0 7px 8px;
  border-color: transparent transparent transparent #04451e;
  position: absolute;
  top: 50%;
  left: 6%;
  margin-top: -7px;
}

a.btn_06:hover:before {
  border-color: transparent transparent transparent #fff;
}




/*黒細ライン＆ホバーも黒*/
a.btn_07 {
display: flex;
    justify-content: center;
    align-items: center;
    background: #fff;
    border: 1px solid #000;
    box-sizing: border-box;
    width: 400px;
    height: 60px;
    padding: 0 6% 0 6%;
    color: #000;
    font-size: 16px;
    text-align: left;
    text-decoration: none;
    position: relative;
    transition-duration: 0.2s;
    margin: 0 auto;
}

a.btn_07:hover {
  background: #000;
  color: #fff;
}

a.btn_07:before {
  content: "";
  display: inline-block;
  width: 0;
  height: 0;
  border-style: solid;
  border-width: 7px 0 7px 8px;
  border-color: transparent transparent transparent #000;
  position: absolute;
  top: 50%;
  left: 6%;
  margin-top: -7px;
}

a.btn_07:hover:before {
  border-color: transparent transparent transparent #fff;
}

/*================================
その他の記事の記述
=================================*/


.new {
	max-width: 1000px;
	text-align: center;
	margin: 0% auto;
}

.other {
    display: grid;
    grid-template-columns: 23% 23% 23% 23%;
    /* grid-template-rows: 200px; */
    gap: 2% 2.7%;
    grid-auto-flow: row;
    grid-template-areas: "other-1 other-2 other-3 other-4";
    text-align: center;
    margin: 0 auto;
    max-width: 85%;
}

.other-1 { grid-area: other-1; }
.other-2 { grid-area: other-2; }
.other-3 { grid-area: other-3; }
.other-4 { grid-area: other-4; }


.other_title {
	 text-align: left;
    max-width: 85%;
	margin: 1% auto;
	font-size: 20px;
}

.other_details {
font-size: 15px;
text-align-last: left;	
}






/*================================
tablet
=================================*/
@media(max-width: 860px){
#Area .imageArea ul.row-fluid {
    width: 100%;
    text-align: center;
    margin: 5% auto 0;
  }	
	
.mainimage {
	width: 100%;
	display: block;
}


/* 余白*/
.spece {
 padding-top:3%;
  text-align:center;
}	
	

	
/* ===================================
    新しいコンテナー
==================================== */
	
.container_01,.container_02,.container_03,.container_04,.container_05 {  
	display: grid;
  grid-template-columns: 32% 32% 32%;
        grid-template-rows: 27% 27% 27%;
        gap: 7px 7px;
  grid-auto-flow: row;
	margin-bottom: -38%;
	max-width: 100%;
    text-align: center;
    margin: 0 auto;
}
	
.container_frame {
	margin: 0 auto;
	max-width: 690px;
	text-align: center;
	margin-bottom: 10%;
}
	

	
/* ===================================
    画像の＋表示
==================================== */

.plus {
    position: absolute;
    top: 108%;
    right: 2%;
    font-size: 20px;
    z-index: 99;
    color: #333333;
    /*font-family: "Helvetica", "Arial";*/
	font-weight: 300;
}

.img1-1,.img1-2,.img1-3,.img1-4,.img1-5,.img1-6,.img1-7,
.img2-1,.img2-2,.img2-3,.img2-4,.img2-5,.img2-6,.img2-7,
.img3-1,.img3-2,.img3-3,.img3-4,.img3-5,.img3-6,.img3-7,
.img4-1,.img4-2,.img4-3,.img4-4,.img4-5,.img4-6,.img4-7,
.img5-1,.img5-2,.img5-3,.img5-4,.img5-5,.img5-6,.img5-7
{
    margin: 0px 0 25px;
    position: relative;
}	
	
/* ===================================
    全身写真のモーション
==================================== */

.moving-1,.moving-2,.moving-3,.moving-4,.moving-5 {
  width: 99%;
  position: relative;
}

.movingimg {
  position: absolute;
  top: 20px;
  left: 0;
  bottom: 0;
  right: 0;
  opacity: 0;
  background-size: cover;
  background-position: center center;
  
  animation: image-switch-animation 12s infinite;
}
	
	
/* ==============================
  メインテキスト
=============================== */

.maintext {
	font-size: 14px;
	width: 70%;
	text-align: left;
	margin: 0 auto;
	margin-bottom: 4%;
	margin-top: -22%;
	letter-spacing: 0.1em;
}


	
/* ===================================
    コーディネートのコンテンツ
==================================== */

.container_frame_02 {  display: grid;
  grid-template-columns: 48.5% 48.5%;
  /*grid-template-rows: 406px;*/
  gap: 10px 20px;
  grid-auto-flow: row;
  grid-template-areas:
    "coordinate-1 coordinate-2";
	margin: 2% auto 4% auto;
    max-width: 670px;
	/*background-color: aqua;*/
}

.coordinate-1 { grid-area: coordinate-1; }

.coordinate-2 { grid-area: coordinate-2; }


.title-2{
	font-size: 20px;
	font-family: "roma-shaded", sans-serif;
	font-weight: 400;
	font-style: normal;
}
	
/* ===================================
    画像のCHECKの表示
==================================== */

.check {
    position: absolute;
    top: 375px;
    right: 10px;
    font-size: 16px;
    z-index: 99;
    color: #333333;
	font-family: "roma-shaded", sans-serif;
	font-weight: 200;
	font-style: normal;
}

	


	
	
/* ================================
    ボタン系
================================= */
a.btn_01 {
    text-align: center;
    vertical-align: middle;
    text-decoration: none;
    width: 20px;
    margin: 5%;
    padding: 0.3rem 1.5rem;
    font-weight: bold;
    border: 1px solid #202020;
    /* background: #202020; */
    color: #000;
    transition: 0.5s;
    font-size: 12px;
}
	
a.btn_05 {
    display: block;
    text-align: center;
    vertical-align: middle;
    text-decoration: none;
    width: 250px;
    margin: 5% auto 9% auto;
    padding: 1rem 1rem;
    font-weight: bold;
    border: 1.5px solid #77a5bc;
    background: #77a5bc;
    color: #fff;
    border-radius: 100vh;
    transition: 0.5s;
    font-size: 14px;
}

a.btn_05:hover {
	color: #78a8ba;
	background: #fff;
}	

	
a.btn_03 {
    display: block;
    text-align: center;
    vertical-align: middle;
    text-decoration: none;
    width: 250px;
    margin: 5% auto 4% auto;
    padding: 1rem 4rem;
    font-weight: bold;
    border: 1.5px solid #77a5bc;
    background: #77a5bc;
    color: #fff;
    border-radius: 100vh;
    transition: 0.5s;
    font-size: 13px;
}

a.btn_03:hover {
	color: #78a8ba;
	background: #fff;
}
	
a.btn_06 {
display: flex;
    justify-content: center;
    align-items: center;
    box-sizing: border-box;
    width: 370px;
    height: 60px;
    padding: 0 6% 0 6%;
    font-size: 15px;
    text-align: left;
    text-decoration: none;
    position: relative;
    transition-duration: 0.2s;
    margin: 0 auto;
}

a.btn_06:before {
  content: "";
  display: inline-block;
  width: 0;
  height: 0;
  border-style: solid;
  border-width: 7px 0 7px 8px;
  position: absolute;
  top: 50%;
  left: 6%;
  margin-top: -7px;
}

	
	
/*================================
その他の記事の記述
=================================*/

.other {
    display: grid;
    grid-template-columns: 23% 23% 23% 23%;
    gap: 2% 2.7%;
    grid-auto-flow: row;
    grid-template-areas: "other-1 other-2 other-3 other-4";
    text-align: center;
    margin: 0 auto;
    max-width: 85%;
}

.other-1 { grid-area: other-1; }
.other-2 { grid-area: other-2; }
.other-3 { grid-area: other-3; }
.other-4 { grid-area: other-4; }

.other_title {
	 text-align: left;
    max-width: 85%;
	margin: 1% auto;
	font-size: 14px;
}

	
}


/*===================================
SMP
====================================*/

@media (max-width: 480px) {
#Area .imageArea ul.row-fluid {
    width: 100%;
    text-align: center;
    margin: 0 auto;
  }
	
img {
    max-width: 100%;
	}	
	
	/* 余白*/
.spece {
 padding-top:3%;
  text-align:center;
}

.spece2 {
 padding-top:20%;
  text-align:center;
}	


.border_1 {
	border-top: 1px solid #d1cbc2;
	width: 80%;
	margin: 20% auto 10% auto;
}
	
	
.top_text_01 {
	font-size: 14px;
	line-height: 2.5;
	margin: 14% auto;
}

/* ===================================
    コンテンツ-ブランドリスト
==================================== */

.text04_782 {
    font-size: 17px;
    margin: 8% 0 4% 0%;
    text-align: center;
}

.text04_782 span {
    font-size: 12px;
    vertical-align: 10%;
    }	
	
	
li a:hover {
	color: #c65572;
}

ul.upper,ul.bottom {
	display: flex;
	max-width: 920px;
    margin: 0 auto;
	border-top: 1px solid gray;
	padding-top: 2%;
	padding-bottom: 2%;
}

ul.bottom {
	border-bottom: 1px solid gray;
	margin-bottom: 10%;
}

.itemlist_782 ul li {
    margin-bottom: 9%;
	ine-height: 1.7;
	flex: auto;
    font-size: 15px;
	/*background-color: aqua;*/
	 text-align: center;
	border-right: 1px solid gray;
    width: 95%;
	margin: 0 auto 0 auto;
    /*margin-left: 9%;*/

	
}

li.upper:last-child,li.bottom:last-child {
	border: none
}

	

/* ==============================
    コンテンツ-アイテムタイトル
============================== */
.border_1 {
	border-top: 1px solid #d1cbc2;
	width: 80%;
	margin: 14% auto 14% auto;
}

.title {
		font-size: 21px;
	margin-bottom:0px;
	}	
	
	
/* ===================================
    新しいコンテナー
==================================== */
	
.container_01,.container_02,.container_03,.container_04,.container_05 {  
	display: grid;
	grid-template-columns: 31% 31% 31%;
	grid-template-rows: 25% 25% 25%;
	gap: 0% 3%;
	grid-auto-flow: row;
	/*margin-bottom: -38%;*/
	text-align: center;
	margin: 0 auto;
}
	
.container_frame {
	margin: 0 auto;
	max-width: 343px;
	text-align: center;
	margin-bottom: 10%;
}
	
/* ===================================
    ピックアップイメージ
==================================== */
	
.pickup_image {
	margin-bottom: 14%;
	 position: relative;
	}	

.pickup_image_01 {
	width: 49%;
    margin-left: 7%;
}

.pickup_image_02 {
	width: 49%;
    margin-right: 2%;
    margin-top: -25%;
}

.pickup_image_03 {
	width: 47%;
    margin-left: 11%;
    margin-top: -31%;
}

.pickup_image_04 {
	width: 54%;
	margin-right: 4%;
	position: relative;
	z-index: 10;
}

.pickup_image_05 {
	width: 44%;
	margin-left: 4%;
	margin-top: -25%;
	position: relative;
	z-index: 1;
}

.pickup_image_06 {
	width: 43%;
	margin-right: 13%;
	margin-top: -30%;
	position: relative;
	z-index: 5;
}

.pickup_image_07 {
    width: 60%;
    margin-right: 6%;
}

.pickup_image_08 {
	width: 49%;
	margin-left: 3%;
	margin-top: -55%;
	position: relative;
	z-index: 5;
}

.pickup_image_09 {
	width: 45%;
	margin-right: 14%;
	margin-top: -3%;
	position: relative;
	z-index: 1;
}

.pickup_image_10 {
	width: 49%;
	margin-left: 5%;
	position: relative;
	z-index: 10;
}

.pickup_image_11 {
	width: 50%;
	margin-right: 3%;
	margin-top: -33%;
	position: relative;
	z-index: 5;
}

.pickup_image_12 {
	width: 42%;
	margin-left: 10%;
	margin-top: -25%;
	position: relative;
	z-index: 1;
}

.pickup_image_13 {
	width: 50%;
	margin-right: 0%;
	position: relative;
	z-index: 10;
}

.pickup_image_14 {
	width: 53%;
	margin-left: 1%;
	margin-top: -40%;
	position: relative;
	z-index: 1;
}

.pickup_image_15 {
	width: 44%;
	margin-right: 8%;
	margin-top: -30%;
	position: relative;
	z-index: 5;
	}


	

	
/* ===================================
    画像の＋表示
==================================== */

.plus {
    position: absolute;
    top: 120%;
    right: 2%;
    font-size: 15px;
    z-index: 99;
    color: #333333;
    /*font-family: "Helvetica", "Arial";*/
	font-weight: 300;
}

.img1-1,.img1-2,.img1-3,.img1-4,.img1-5,.img1-6,.img1-7,
.img2-1,.img2-2,.img2-3,.img2-4,.img2-5,.img2-6,.img2-7,
.img3-1,.img3-2,.img3-3,.img3-4,.img3-5,.img3-6,.img3-7,
.img4-1,.img4-2,.img4-3,.img4-4,.img4-5,.img4-6,.img4-7,
.img5-1,.img5-2,.img5-3,.img5-4,.img5-5,.img5-6,.img5-7
{
    margin: 0px 0 25px;
    position: relative;
}	
	
/* ===================================
    全身写真のモーション
==================================== */

.moving-1,.moving-2,.moving-3,.moving-4,.moving-5 {
  width: 100%;
  position: relative;
}

.movingimg {
  position: absolute;
  top: 20px;
  left: 0;
  bottom: 0;
  right: 0;
  opacity: 0;
  background-size: cover;
  background-position: center center;
  
  animation: image-switch-animation 12s infinite;
}
	

/* ==============================
  メインテキスト
=============================== */

.maintext {
	font-size: 14px;
	width: 80%;
	text-align: left;
	margin: 0 auto;
	margin-bottom: 7%;
	margin-top: -32%;
	letter-spacing: 0.1em;
}


	
/* ===================================
    コーディネートのコンテンツ
==================================== */

.container_frame_02 {  display: grid;
  grid-template-columns: 48.5% 48.5%;
  /*grid-template-rows: 200px;*/
  gap: 10px 5px;
  grid-auto-flow: row;
  grid-template-areas:
    "coordinate-1 coordinate-2";
	margin: 2% auto 4% auto;
    max-width: 350px;
	/*background-color: aqua;*/
}

.coordinate-1 { grid-area: coordinate-1; }

.coordinate-2 { grid-area: coordinate-2; }


.title-2{
	font-size: 20px;
	font-family: "roma-shaded", sans-serif;
	font-weight: 400;
	font-style: normal;
}
	
/* ===================================
    画像のCHECKの表示
==================================== */

.check {
    position: absolute;
    top: 193px;
    right: 6px;
    font-size: 10px;
    z-index: 99;
    color: #333333;
	font-family: "roma-shaded", sans-serif;
	font-weight: 200;
	font-style: normal;
}

 
 /*=== スライドのアニメーション ========================= */
@keyframes slideAnime{
   0% { left: 100%  }
   2% { left: 0     }
  18% { left: 0     }
  20% { left: -100% }
 100% { left: -100% }
}
	
	

/*===================================
ボタン系
===================================*/	
	
.btn_02 {
    align-items: center;
    background: #fff;
    border: 1px solid #000;
    box-sizing: border-box;
    width: 200PX;
    padding: 1.5% 10% 1.5% 10%;
    color: #1b6288;
    font-size: 13px;
    text-align: left;
    text-decoration: none;
}

.btn_02:hover {
	color: #78a8ba;
	background: #fff;
}
	
	
	
a.btn_05 {
    display: block;
    text-align: center;
    vertical-align: middle;
    text-decoration: none;
    width: 250px;
    margin: 0% auto 9% auto;
    padding: 1.2rem 0rem;
    font-weight: bold;
    border: 1.5px solid #77a5bc;
    background: #77a5bc;
    color: #fff;
    border-radius: 100vh;
    transition: 0.5s;
    font-size: 12px;
}

a.btn_05:hover {
	color: #78a8ba;
	background: #fff;
}	

	
a.btn_03 {
        display: block;
    text-align: center;
    vertical-align: middle;
    text-decoration: none;
    width: 250px;
    margin: 5% auto 4% auto;
    padding: 1.2rem 2rem;
    font-weight: bold;
    border: 1.5px solid #77a5bc;
    background: #77a5bc;
    color: #fff;
    border-radius: 100vh;
    transition: 0.5s;
    font-size: 12px;
}

a.btn_03:hover {
	color: #78a8ba;
	background: #fff;
}	
	
	
a.btn_04 {
 display: block;
    text-align: center;
    vertical-align: middle;
    text-decoration: none;
    width: 100px;
    margin: 0% auto 4% 63%;
    padding: 0.5rem 0.1rem;
    font-weight: bold;
    border: 1.5px solid #77a5bc;
    background: #77a5bc;
    color: #fff;
    border-radius: 100vh;
    transition: 0.5s;
    font-size: 12px;
}

a.btn_04:hover {
	color: #78a8ba;
	background: #fff;
}	

a.btn_06 {
	width: 100%;
	height: 50px;
	font-size: 14px;
	max-width: 260px;
	}		

.itempt782 {
  position: relative;
}
	
	
	.sp_only {
  display: block;
}

.sp_only_top {
  display: block;
margin-left: calc(-50vw + 50%);
width:100vw;
}
	
	
	
/*================================
その他の記事の記述
=================================*/
	
.other {
	display: grid;
	grid-template-columns: 48% 48%;
	grid-template-rows: 50% 50%;
	gap: 3% 4%;
	grid-auto-flow: row;
	grid-template-areas:
	"other-1 other-2"
	"other-3 other-4";
	text-align: center;
	margin: 0 auto;
	max-width: 88%;
}

.other-1 { grid-area: other-1; }
.other-2 { grid-area: other-2; }
.other-3 { grid-area: other-3; }
.other-4 { grid-area: other-4; }
	
.other_title {
	 text-align: left;
    max-width: 85%;
	margin: 1% auto;
	font-size: 13px;
}
	
.other_details {
font-size: 12px;
text-align: left;	
}
	
	
	
	
}