@charset "UTF-8";


/* =========== btn =========== */
.btn a,
.btn span {
  position: relative;
  display: inline-block;
  box-sizing: border-box;
  width: 300px;
  border: none;
  background-color: #505050;
  color: #fff;
  text-align: center;
  text-decoration: none;
  font-weight: bold;
  font-size: 12px;
  font-size: 1.2rem;
  font-family: "游ゴシック", "游ゴシック体", "Yu Gothic", YuGothic, "ヒラギノ角ゴ ProN W3", "Hiragino Kaku Gothic ProN", "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", "メイリオ", "Meiryo", "ＭＳ Ｐゴシック", sans-serif;
  line-height: 3.7;
  cursor: pointer;
  transition-timing-function: linear;
  transition-duration: 0.15s;
  transition-property: opacity;
  margin: auto 15px;
}
@media only screen and (max-width: 48em) {
.btn a,
.btn span {
  margin: 5px 0;
}  
}
.btn_box{
  padding: 0 0 5% 0;
  text-align: center;
}
.btn2 a{
  display: inline-block;
  box-sizing: border-box;
  width: 300px;
  border: solid 1px #505050;
  background-color: #fff;
  color: #505050;
  text-align: center;
  text-decoration: none;
  font-weight: bold;
  font-size: 12px;
  font-size: 1.2rem;
  font-family: "游ゴシック", "游ゴシック体", "Yu Gothic", YuGothic, "ヒラギノ角ゴ ProN W3", "Hiragino Kaku Gothic ProN", "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", "メイリオ", "Meiryo", "ＭＳ Ｐゴシック", sans-serif;
  line-height: 3.7;
}
.flex_2A div.btn2, .flex_2A section{
  width: 100%;
}

a.txt_link{ 
  font-size: 15px;
  font-weight: bold;
}


/*mainvisual*/
.topics_header {
  position: relative;
}
.topics_bg-img {
  top: 0;
  left: 0;
  display: block;
  width: 100%;
  height: 100%;
}
@media only screen and (max-width: 48em) {
  .topics_bg-img {
    padding-top: 50%; 
    width: 100%;
    position: relative;
    background-size : cover;
  }
  .topics_bg-img img {
    display: none;
  }
}



/*結婚式当日までの流れ*/
.topics-area{
  padding: 5% 5% 3% 5%;
  border: #bca475 solid 1px;
}
.topics-box {
  display: flex;
  align-items: center;
  margin-bottom: 20px;
}
.topics-box_img {
  overflow: hidden; 
  width: 30%;
  margin-right: 20px;
}
.topics-box_txt {
  width: 70%;
  text-align: left;
}
.topics-box_title {
  font-size: 22px;
  font-size: 2.2rem;
  line-height: 1.8;
}

.flow_area{
  background-color: #fff;
  padding: 3% 5%;
  border-radius: 10px;
}

/* flowIcon */
.flow_icon{
  display: flex;
  margin-bottom: 10px;
}

/* topicsIcon */
span.topics_icon{
	opacity:0;
	position:relative;
	display:block;
	line-height:1.4;
	font-size:25px;
	font-weight: normal;
	letter-spacing:1.0px;
	font-family:"Times New Roman", Times, serif;
	}
span.topics_icon::after{
	position:absolute;
	bottom:14px;
	left:0;
	display:block;
	content:"";
	height:1px;
	width:0;
	background-color:#bca475;
	}
span.topics_icon.visible::after{
	transition:all 1.5s;
	width:100%;
	}
span.topics_icon strong{
	padding: 0 10px 0 0;
	font-weight:normal;
	line-height:1.4;
	font-size:50px;
	margin:0 5px;
	font-family: 'Great Vibes', cursive;
	}


@media only screen and (max-width: 48em) {
.topics-box {
  display: block;
}
.topics-area{
  padding: 7% 5% 0 5%;
}
.topics-box_img { 
  width: 50%;
  margin: auto;
  text-align: center;
}
.topics-box_txt {
  width: 100%;
  margin-bottom: 20px;
}
}




.okaeri-kon_img{
  padding: 3% 0;
}

.container1{
  padding: 5%;
}
@media only screen and (max-width: 48em) {
.okaeri-kon_img{
  padding: 3%;
}
}





/*3つの特徴*/
ul.cp_list {
  padding:0.5em;
  list-style-type:none;
  font-weight: bold;
  margin: auto;
  width: 550px;
  font-size: 16px;
}
ul.cp_list li {
  position:relative;
  padding: 0em 0.3em 0.3em 1.3em;
}
ul.cp_list li:after,
ul.cp_list li:before {
  position:absolute;
  top: 0.43em;
  left: 0.5em;
  content:'';
  display:block;
  background: #FFC107;
  height: 11px;
  width: 4px;
  border-radius: 10px;
  transform: rotate(45deg);
}
ul.cp_list li:before {
  top: 0.6em;
  left: 0.2em;
  height:8px;
  transform:rotate(-45deg);
}
.point_text_box{
  padding-top: 15px;
}
@media only screen and (max-width: 48em) {
ul.cp_list {
  padding: 0;
  width: 100%;
}  
.point_text_box{
  padding-bottom: 20px;
}
}




/* salon info */
.salon_box{
  padding: 3%;
}
.salon_img{
  width: 100% !important;
}
.flex_2A div.salon_box{
  text-align: center;
  width: 48%;
  margin: auto;
}
@media only screen and (max-width: 48em) {
.flex_2A{
  display: block;
}
.flex_2A div.salon_box{
  width: 100%;
}
.salon_box{
  padding: 5%;
}
}


/*共通*/
.gothic{
  font-family: "游ゴシック", "游ゴシック体", "Yu Gothic", YuGothic, "ヒラギノ角ゴ ProN W3", "Hiragino Kaku Gothic ProN", "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", "メイリオ", "Meiryo", "ＭＳ Ｐゴシック", sans-serif;
}
.mincho{
  font-family: "游明朝", "游明朝体", "Yu Mincho", YuMincho, "ヒラギノ明朝 ProN W3", "ヒラギノ明朝 Pro W3", "HiraMinProN-W3", "HG明朝E", "Hiragino Mincho ProN", "Hiragino Mincho Pro", "HGS明朝E", "ヒラギノ明朝 Pro W6", "ＭＳ Ｐ明朝", "MS PMincho", "MS 明朝", serif;
}
.contents_box{
  padding: 5% 0;
  text-align: center;
}
.marker{
  background:linear-gradient(transparent 60%, #ccdfcd 60%); /*（OAK用）*/
}

/* h */
h1{
 font-size: 30px;
}
h2{
 font-size: 20px;
}
h3{
 font-size: 25px;
}
h4{
 font-size: 25px;
 line-height: 30px;
}
h4 span{
 font-size: 14px;
}
@media only screen and (max-width: 48em) {
h1{
 font-size: 23px;
}  
h2{
 font-size: 17px;
}
h3{
 font-size: 23px;
}
h4{
 font-size: 23px;
}
}


/* txt */
.txt_left{
  text-align: left;
}
.txt_center{
  text-align: center;
}
.txt_01{
  font-size: 14px;
  font-weight: 500;
}
.txt_02{
  font-size: 25px;
  font-weight: bold;
}
.txt_02-b{
  font-size: 25px;
  font-weight: bold;
}
.txt_03{
  font-size: 18px;
  font-weight: bold;
  padding: 0.5em;
  background: #eff5ed;
  border-left: solid 5px #5A825C; /*（OAK用）*/
  margin-bottom: 10px;
}
.txt_04{
  font-size: 30px;
  font-weight: 500;
}
.txt_05{
  background-color: #5A825C; /*（OAK用）*/
  padding: 0.5% 3%;
  border-radius: 5px;
  color: #fff;
  margin-right: 10px;
  font-weight: bold;
}
.txt_06{
  font-size: 14px;
  font-weight: 500;
}
@media only screen and (max-width: 48em) {
.txt_02{
  font-size: 23px;
}
.txt_02-b{
  font-size: 20px;
}
.txt_03{
  font-size: 20px;
}
.txt_05{
  padding: 1% 3%;
  font-size: 13px;
}
.txt_06{
  font-size: 12px;
}
}


/* hr */
.hr1{
  height: 2px;
  background-color: #5A825C; /*（OAK用）*/
  width: 640px;
  border: none;
  margin-bottom: 20px;
}
@media only screen and (max-width: 48em) {
.hr1{
  width: 100%;
  margin-bottom: 20px;
}  
}

/* text_color */
.txt_color1{
  color: #5A825C; /*（OAK用）*/
}
.txt_color2{
  color: #bca475;
}

/* bg_color */
.bg_color1{
  background-color: #e6dbce33;
}
.bg_color2{
  background-color: #eff5ed !important; /*（OAK用）*/
}
.bg_color3{
  background-color: #f3f2eb !important;
}

.limited{
  width: 100%;
}
@media only screen and (max-width: 48em) {
.limited{
  width: 90%;
}  
.mb_mb20{
  margin-bottom: 20px !important;
}
}