/*****************************
Theme Name: otemachi-chuboテーマ
Discription: otemachi-chuboのオリジナルテーマです。
Author: MOCA.Inc
******************************/
html { scroll-behavior: smooth;}
a {
	text-decoration:none;
}
.pc {
	display:flex;
}
.sp {
	display:none;
}

/* --------------------------------------------
 * 　メインヴィジュアル
 * -------------------------------------------- */
.mv_wrap {
	width:100%;
}

.mv {
	margin:0 auto;
	height: calc(100svh);
	background:url(https://magatama.oreillebeauty.com/wp-content/themes/magatama.oreillebeauty/img/top/mv_back_pc.jpg);
	background-size: cover;
	background-position: center;
	background-repeat: no-repeat;
	padding:3% 0 0 0;
	display:flex;
	flex-wrap:wrap;
}
.mv img{
	width: 100%;
	height: calc(100svh);
	object-fit: cover;
	vertical-align: bottom;
}

.mv_parallax {
	margin:0 auto;
	height: 450px;
	width: 100%;
    background: url(https://testogate2409.stg-s.snapup.jp/wp/wp-content/themes/ogate_renew/img/mv_pc2.jpg);
    background-position: center;
    background-size: cover;
    background-repeat: no-repeat;	
	background-attachment: fixed;
}
.mv .left {
	width: 430px;
	height:160px;
	margin:0 auto 0 0;
	display: flex;
    flex-wrap: wrap;
    align-items: center;
}
.mv .left p{
	width:100%;
	text-align:left;
	margin:0 auto;
	padding: 0 0 20px 50px;
	font-size:1.8rem;
	color:#ffffff;	
}
.mv .left p .tbig_ur{
	width:100%;
	text-align:left;
	margin:0 auto;
	font-size:2.2rem;
	color:#ffffff;	
	padding:0 0 10px 0;
	text-decoration:underline;
	text-decoration-color: #ff0000;
	text-decoration-thickness: 3px;
	text-underline-offset: 8px;
}
.mv .left p .tbig{
	width:100%;
	text-align:left;
	margin:0 auto;
	font-size:2.2rem;
	color:#ffffff;	
	padding:0 0 10px 0;
	text-decoration-color: #ff0000;
	text-decoration-thickness: 3px;
	text-underline-offset: 8px;
}
.mv .imgarea{
    width: 100%;
    height: auto;
    object-fit: cover;
    vertical-align: bottom;
    display:flex;
	flex-wrap: wrap;
    justify-content: center;
    align-content: center;
  }
  .mv .imgarea .reft{
    width: 50%;
    height: auto;
    margin: 6% 0 0 0;
  }
  .mv .imgarea .reft img{
    width: 65%;
    margin: 0 10% 0 30%;
    height: auto;
  }
  .mv .imgarea .right{
    width: 50%;
    height: auto;
    margin: 3% 0 0 0;
  }
  .mv .imgarea .right img{
    width: 65%;
    margin: 0 30% 0 5%;
    height: auto;
  }
  .mv .imgarea_u{
    width: 100%;
    margin: 50px auto 0 auto;
    height: auto;
    text-align: center;
    object-fit: cover;
    vertical-align: bottom;
  }
  .mv .imgarea_u img{
    width: 50%;
    margin: 0 auto;
    height: auto;
  }

/* --------------------------------------------
 *タイトル
 *-------------------------------------------- */

 .top_title {
	width:100%;
	max-width:1100px;
	margin:0 auto;
	padding:40px 50px;	
}
.top_title p{
	color: #197149;
	font-family: "Abel", sans-serif;
	font-size: 1.6rem;
	font-style: normal;
	font-weight: 400;
	line-height: 120%;
	margin:0 0 0 0;
}
.top_title h2{
	color: #0b3e27;
	font-family: "Yu Mincho","Noto Selif", serif;
	font-size: 2.4rem;
	font-weight: bold;
	line-height: 36px; /* 150% */
	margin:0 0 20px 0;
}

/* --------------------------------------------
 * 　新着記事
 * -------------------------------------------- */

.pc {
	display:flex !important;
}
.sp {
	display:none !important;
} 
.section_wrap {
	width: 100%;
}
.section_news_wrap {
	width: 100%;
    background: url(https://otemachi-chubo.com/wp-content/themes/otemachi-chubo_original_theme/img/news_wap_back02.png);
    background-position: center;
    background-size: cover;
    background-repeat: no-repeat;	
}
.button_wrap{
	width:100%;
	margin: 0 0 0 0;
	display:flex;
	flex-wrap:wrap;
	padding: 0 0 60px 0;
}
.button_wrap a{
	width:100%;
	display:flex;
	flex-wrap:wrap;
	color:#ffffff;
	transition : all 0.6s ease 0s;
	justify-content: center;
}
.button_wrap a p{
	width:220px;
	font-size:1.6rem;
	color:#ffffff;
}
.button_wrap a p.button{
	width:auto;
	padding:8px 16px;
	font-size:1.6rem;
	background: #50220b;
	border: #ffffff 1px solid;
	border-radius:10px;
	transition : all 0.6s ease 0s;
}
.button_wrap a p.button:hover{
	background: #ffffff;
	border: #50220b 1px solid;
	transition : all 0.6s ease 0s;
	color:#50220b;
}
.button_wrap02{
	margin: 0 0 0 0;
	display:flex;
	flex-wrap:wrap;
	padding: 40px 0;
}
.button_wrap02 a{
	width:100%;
	display:flex;
	flex-wrap:wrap;
	color:#ffffff;
	transition : all 0.6s ease 0s;
	justify-content: left;
}
.button_wrap02 a p{
	width:220px;
	font-size:1.6rem;
	color:#ffffff;
}
.button_wrap02 a p.button{
	width:auto;
	padding:8px 16px;
	font-size:1.6rem;
	background: #000000;
	border: #ffffff 1px solid;
	border-radius:10px;
	transition : all 0.6s ease 0s;
	color:#000000;
}
.button_wrap02 a p.button:hover{
	background: #ffffff;
	border: #000000 1px solid;
	transition : all 0.6s ease 0s;
	color:#000000 !important;
}
.button_wrap03 {
    margin: 0 0 0 0;
    display: flex;
    flex-wrap: wrap;
    padding: 0 0 40px 0;
}
.button_wrap03 a{
	width:100%;
	display:flex;
	flex-wrap:wrap;
	color:#ffffff;
	transition : all 0.6s ease 0s;
	justify-content: left;
}
.button_wrap03 a p{
	width:220px;
	font-size:1.6rem;
	color:#ffffff;
}
.button_wrap03 a p.button{
	width:auto;
	padding:8px 16px;
	font-size:1.6rem;
	background: #000000;
	border: #ffffff 1px solid;
	border-radius:10px;
	transition : all 0.6s ease 0s;
	color:#000000;
}
.button_wrap03 a p.button:hover{
	background: #ffffff;
	border: #000000 1px solid;
	transition : all 0.6s ease 0s;
	color:#000000 !important;
	opacity:0.7;
}

@media screen and (max-width: 750px) {
	.button_wrap02{
		margin: 0 0 0 0;
		display:flex;
		flex-wrap:wrap;
		padding: 20px 0 40px 0;
	}
}

.top_newarticle {
	width:100%;
	max-width:1000px;
	margin:0 auto;
	padding:0 50px 50px 50px;
}
.top_newarticle ul{
	width:100%;
	padding:0;
	margin:20px 0 0 0;
	display: flex;
	flex-wrap: wrap;
}
.top_newarticle ul li{
	margin: 0 20px 40px 0;
	width: calc(25% - 60px / 4);
	list-style: none;
	display:flex;
	flex-wrap: wrap;
}
.top_newarticle ul li:nth-child(4){
	margin: 0 0 40px 0;
}
.top_newarticle ul li img{
	width: 100%;
	height:auto;
}
.top_newarticle ul li .articate{
	width:100%;
	display:flex;
	flex-wrap: wrap;
	text-align:left;
}
.top_newarticle ul li .articate p{
	width:100%;
	margin:5px 0 0 0; 
	font-size:1.2rem;
}
.top_newarticle ul li .artittl{
	width:100%;
	display:flex;
	flex-wrap: wrap;
	text-align:left;
}
.top_newarticle ul li .artittl p{
	width:100%;
	margin:10px 0;
	font-size:1.6rem;
	display: -webkit-box; /* 必須 */
    -webkit-box-orient: vertical; /* 必須 */
    -webkit-line-clamp: 2; /* 行数を制限 */
    overflow: hidden; /* はみ出た部分を非表示 */
}
.top_newarticle ul li .artisent{
	width:100%;
	display:flex;
	flex-wrap: wrap;
	text-align:left;
}
.top_newarticle ul li .artisent p{
	width:100%;
	margin:10px 0;
	font-size:1.4rem;
	display: -webkit-box; /* 必須 */
    -webkit-box-orient: vertical; /* 必須 */
    -webkit-line-clamp: 3; /* 行数を制限 */
    overflow: hidden; /* はみ出た部分を非表示 */
}

 /* --------------------------------------------
 * 　サイト説明
 * -------------------------------------------- */
.top_sentence {
	width:100%;
	max-width:1100px;
	margin:0 auto;
	padding:0 40px;
}
.top_sentence p {
	width:100%;
	font-size:1.6rem;
	margin:0 0 40px 0
}

 /* --------------------------------------------
*私たちについて
*--------------------------------------------*/
.top_moreinfo {
	width:100%;
	max-width:1100px;
	margin:0 auto;
	padding:0 50px;
}
.top_moreinfo ul{
	width:100%;
	padding:40px 0 0 0;
	display: flex;
	flex-wrap: wrap;
}
.top_moreinfo ul li{
	position: relative;
	margin: 0 20px 40px 0;
	width: calc(33.3333% - 40px / 3);
	list-style: none;
	display: flex;
	flex-wrap: wrap;
	align-items: center;
}
.top_moreinfo ul li a{
    position: absolute;
    width: 100%;
    height: 100%;
    top:0;
    left: 0;
    text-indent: 100%; /*テキスト非表示*/
    white-space: nowrap; /*テキスト非表示*/
    overflow: hidden; /*テキスト非表示*/
}
.top_moreinfo ul li:nth-child(3n){
	margin: 0 0 40px 0;
}
.top_moreinfo ul li .imgarea{
	width:20%;
	margin:0 auto 0 0;
}
.top_moreinfo ul li .imgarea img{
	width: 100%;
}
.top_moreinfo ul li .imgarea{
	width:20%;
	margin:0 auto 0 0;
}
.top_moreinfo ul li .textarea{
	width:80%;
	display:flex;
	flex-wrap: wrap;
	text-align:left;
}
.top_moreinfo ul li .textarea p{
	width:100%;
	margin:0 0 0 20px;
	font-size:1.6rem;
}

@media screen and (max-width: 767px) {
    .pc {
      display:none !important;
    }
    .sp {
      display:flex !important;
    } 

  /* --------------------------------------------
  * 　メインヴィジュアル
  * -------------------------------------------- */


    /* --------------------------------------------
  *タイトル
  *-------------------------------------------- */

    .top_title {
      width:100%;
      margin:0 auto;
      padding:0;	
    }	
  .top_title p{
    color: #197149;
    font-family: "Abel", sans-serif;
    font-size: 1.4rem;
    font-style: normal;
    font-weight: 400;
    line-height: 120%;
    margin:0 0 0 0;
  }
  .top_title h2{
    color: #0b3e27;
	font-family: "Yu Mincho","Noto Selif", serif;
    font-size: 2rem;
    font-weight: bold;
    line-height: 36px; /* 150% */
    margin:0 0 20px 0;
  }

  /* --------------------------------------------
  * 　新着記事
  * -------------------------------------------- */
  .top_newarticle {
    width:100%;
    margin:0 auto;
    padding:0 0 50px 0;
  }
  .top_newarticle ul li{
    margin: 0 20px 20px 0;
    width: calc(50% - 20px / 2);
    list-style: none;
    display:flex;
    flex-wrap: wrap;
  }
  .top_newarticle ul li:nth-child(2n){
    margin: 0 0 20px 0;
  }
  .top_newarticle ul li:nth-child(4){
    margin: 0 0 20px 0;
  }
  .top_newarticle ul li img{
    width: 100%;
  }
  .top_newarticle ul li .articate{
    width:100%;
    display:flex;
    flex-wrap: wrap;
    text-align:left;
  }
  .top_newarticle ul li .articate p{
    width:100%;
    margin:5px 0 0 0;
    font-size:1.2rem;
  }
  .top_newarticle ul li .artittl{
    width:100%;
    display:flex;
    flex-wrap: wrap;
    text-align:left;
  }
  .top_newarticle ul li .artittl p{
    width:100%;
    margin:10px 0;
    font-size:1.4rem;
    display: -webkit-box; /* 必須 */
      -webkit-box-orient: vertical; /* 必須 */
      -webkit-line-clamp: 2; /* 行数を制限 */
      overflow: hidden; /* はみ出た部分を非表示 */
  }
  .top_newarticle ul li .artisent{
    width:100%;
    display:flex;
    flex-wrap: wrap;
    text-align:left;
  }
  .top_newarticle ul li .artisent p{
    width:100%;
    margin:10px 0;
    font-size:1.4rem;
    display: -webkit-box; /* 必須 */
      -webkit-box-orient: vertical; /* 必須 */
      -webkit-line-clamp: 3; /* 行数を制限 */
      overflow: hidden; /* はみ出た部分を非表示 */
  }
  @media screen and (max-width: 767px) {
	.top_newarticle {
		width:92%;
		margin:0 auto;
		padding:0 0 50px 0;
	  }
}
  /* --------------------------------------------
  * 　サイト説明
  * -------------------------------------------- */

    .top_sentence {
    width:100%;
    margin:0 auto;
    padding:0;
    }	
    .top_sentence p {
      width:100%;
      font-size: 1.4rem;
      margin:0 0 40px 0
    }

}