/*------------------------------------------------------------------------------
  PC or ALL 
------------------------------------------------------------------------------*/

/* common */

.title-type01:before,
.title-type02:before,
.title-type03:before,
.title-type04:before {
    height: 2px;
}

.blog-content h2:not([class]), .page-content h2:not([class]),
.blog-content h3:not([class]), .page-content h3:not([class]),
.blog-content h4:not([class]), .page-content h4:not([class]) {
  margin-block: var(--text-margin) calc(var(--text-margin) / 2);
}

.mb0 {
	margin-bottom: 0 !important;
}

.blog-type04 .swiper-slide {
	background: var(--sub-color);
}
.blog-type04 .swiper-slide .text {
	padding: 4%;
}

body.home .page-content {
	margin-bottom: 0;
}

@media screen and (min-width: 600px) {
	.box h2.box-h2 {
		color: #1C293F;
		font-size:3.6rem;
	}
	
	.box h3.box-h3 {
		font-size: 3.6rem;
	}
	
	.pc-only {
		display: block !important;
	}
	
	.sp-only {
		display: none !important;
	}
}

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


/* ボタン */

.box .btn a,
.btn a {
    display: inline-block;
    position: relative;
    margin: 0 auto;
    color: #614F00;
    background: var(--main-color-2);
	border-radius: 0px;
	border: 1px solid #614F00;
}

body.home .btn a {
	padding: 6px 75px 6px 55px;
	text-align: center;
}

.box .btn a:after,
.btn a:after {
    content: "";
    position: absolute;
    top: 50%;
    right: 25px;
    transform: translateY(-50%);
	border-top:1px #614F00 solid;
	width: 10%;
	max-width: 12px;
}

.btn.top_btn {
	max-width: 470px;
	margin: 0 auto;
}

.btn.top_btn a {
	background: #1C293F;
	color: #fff;
	width: 100%;
	padding: 40px 50px 40px 20px !important;
	font-size: 2rem;
	border-top: 0;
	border-left: 0;
	border-right: 2px solid #fff;
	border-bottom: 2px solid #fff;
	outline: 10px solid #1C293F;
}

.btn.top_btn a:before {
	content: "";
	position: absolute;
	top: 0;
	left: 0;
	width: 25px;
	height: 25px;
	border: 13px solid #1C293F;
	border-left-color: #fff;
	border-top-color: #fff;
	box-sizing: border-box;
}

.btn.top_btn a:after {
	max-width: 22px;
    height: 5px;
	border-top:0;
    border-right: 2px solid #fff;
    border-bottom: 2px solid #fff;
    transform: skew(45deg);
}

@media screen and (min-width: 1025px) {
	.btn.top_btn a{
		font-size: 2.4rem;
	}
}

@media screen and (max-width: 599px) {
	.btn.top_btn{
		padding-bottom: 20px;
	}
}

/* ヘッダー */
.header {
    background: #614F00;
}

.header-nav > ul > li {
    color: #ffffff;
}

.header-nav > ul > li > a span.title {
    display: none;
}

@media screen and (min-width: 1025px) {
	.header-logo,
	.footer-main .logo {
		width: 313px;
	}
}

/* メインビジュアル */
@media screen and (min-width: 600px) {
	.mainvisual-catch {
    left: 13vw;
	bottom: 13vh;
	}
}

@media screen and (max-width: 599px) {
	.mainvisual-catch {
		left: 50%;
		transform: translate(-50%, 50%);
	}
	
	.mainvisual .swiper-slide img {
    	object-position: 65% top;
	}
}

/* sec_01 NEWS & STAFF BLOG */

.blog-type03 ul li .date {
	font-size: 1.8rem;
}

.blog-type03 ul li h3.box-h3 {
    font-size: 1.6rem;
    font-weight: normal;
}

.blog-type03 ul li {
	border-bottom: var(--border-color) 1px solid;
	position:relative;
	padding: 0 0 20px 0;
}

.blog-type03 ul li:not(:last-child):after {
	content: "";
	position: absolute;
	bottom: -1px;
	left: 0;
	width: 20%;
	height: 2px;
	background: var(--main-color);
}

@media screen and (min-width: 600px) {
	.blog-type03 ul li .date {
		width: 20%;
	}
}

/* sec_02 このような生徒さんが入会されております。 */

.list-check-type01 > ul > li:before {
    content: url(http://order-bouquet-sion.jp/mwp/wp-content/uploads/2024/03/check_icon.webp);
    position: absolute;
    left: 0;
	max-height:17px;
	width:19px;
}

/* sec_03 ごあいさつ */

.sec_03 .box .btn a {
	padding: 0 80px 0 70px;
}

.image-bg-type02 .text {
    max-width: 1000px;
	
    letter-spacing: 0.09em;
    line-height: 2.5;
}

.image-bg-type02 .image {
    min-height: 600px;
}

.image-bg-type02 .text {
	padding: 180px 20px;
}

.msg {
	margin-bottom: 0;
	background: #614F00;
	position: relative;
	padding-bottom;
}

.msg:after {
	content: "";
	position: absolute;
	right: 0;
	bottom: -60px;
	left: 0;
	width: 0px;
	height: 0px;
	margin: auto;
	border-style: solid;
	border-color: #614F00 transparent transparent transparent;
	border-width: 60px 60px 0 60px;
	z-index:1;
}

.msg p {
	margin: 0 !important;
	color: #fff;
	text-align: center;
	font-weight: bold;
	font-size: 4rem;
	padding: 2%;
}

@media screen and (min-width: 600px) and  (max-width: 1024px) {
		.msg p {
		font-size: 3.2rem;
	}
}

@media screen and (max-width: 599px) {
	.msg p {
		font-size: 2.6rem;
	}
	
	.image-bg-type02 .text {
		padding: 80px 20px;
	}
}

/* sec_04 Flower Arrangement School Sionの3つの特徴*/

.banner-type02 ul li {
	background: var(--sub-color);
}

.banner-type02 ul li .text {
    color: var(--text-color);
}

.banner-type02 ul li .text h3 {
    color: var(--main-color);
	text-align: center;
}

.sec_04.box-wrap.bg:before {
	background: url(http://order-bouquet-sion.jp/mwp/wp-content/uploads/2024/03/bg_illust01.webp) no-repeat right top / contain #ffffff;
}

.sec_04 .box-wrap.bg {
	padding-top: 0;
}

@media screen and (min-width: 1025px) {
	.banner-type02 ul li .text h3 {
		font-size: 3rem;
	}
}

@media screen and (min-width: 600px) and (max-width: 1024px) {
	.banner-type02 ul li .text h3 {
		font-size: 2.5rem;
	}
}

@media screen and (min-width: 600px) {
	.banner-type02 ul li .text {
    padding: 4vmin 2vmin;
	}
	
	.banner-type02 ul {
    gap: 20px;
	}
}
	
/* sec_05 体験教室について*/

@media screen and (min-width: 1025px){
	 .image-bg-type01 .text {
		 max-width: 1200px;
		 width:80%;
		 margin: -100px auto calc(var(--box-margin) * 2) auto;
	}
}

/* sec_06
 * オートクチュール・フルール・英国式フラワーアレンジメント */

.sec_06.box-wrap.bg.left:before {
	background: url(http://order-bouquet-sion.jp/mwp/wp-content/uploads/2024/03/bg_illust02.webp) no-repeat left bottom / contain #ffffff;
}

.sec_06.box-wrap.bg.right {
	padding-top: 0;
}

.sec_06.box-wrap.bg.right:before {
	background: url(http://order-bouquet-sion.jp/mwp/wp-content/uploads/2024/03/bg_illust03.webp) no-repeat right bottom / contain #ffffff;
}

.sec_06 .image-text-type03 .text:before {
    width: calc(100% + 180px);
	border-radius:0 50px 0 50px;
}

.sec_06 .image-text-type03 .box-h3 {
	padding-bottom: 0.5em;
	border-bottom: 2px solid var(--text-color);
}

.sec_06 .btn.top_btn a {
	background: #614F00;
	outline: 10px solid #614F00;
}

.sec_06 .btn.top_btn a:before {
	border: 13px solid #614F00;
}

.sec_06 .btn.top_btn a:before {
	border: 13px solid #614F00;
	border-left-color: #fff;
	border-top-color: #fff;
}

@media screen and (min-width: 600px) {
	.sec_06 .image-text-type03 .text {
		width: 50%;
		padding: 120px 0;
	}
	
	.sec_06 .image-text-type03.left .text {
		padding-left: 4%;
	}
	
	.sec_06 .image-text-type03.right .text {
		padding-right: 4%;
	}
	
	.sec_06 .image-text-type03 .box-h3 {
		max-width: 600px;
		font-size: 3rem;
	}
}
/* sec_07 オーダー制作・購入について*/

.sec_07 + .box.row-2 .col:last-child .btn a {
	padding: 21px 50px 21px 20px !important;
}

/* sec_08 制作事例*/

.sec_08 .box-wrap.bg:before {
	background: url(http://order-bouquet-sion.jp/mwp/wp-content/uploads/2024/03/bg_illust04.webp) no-repeat left bottom / contain #ffffff;
}

.sec_08 .box-wrap.bg {
	padding-top: 0;
}

/* sec_09 Official Instagram*/
.sec_09.bg:before {
	background: #EEF1F6;
}

/* フッター */

.fixed-footer {
	background: #1C293F;
}

.fixed-footer .tel a {
	color: #fff;
	font-weight: 900;
	font-size: 4rem;
}

.fixed-footer .tel a:before {
    color: #fff;
}

.fixed-footer p.ja {
	display:none;
}

.footer-main .about {
  font-size: 1.4rem;
}

.footer-main:after {
	background: #fff;
}

@media screen and (min-width: 600px) {
	.fixed-footer .contact a,
	.fixed-footer .insta {
		position: relative;
		padding: 0;
		width: 60px;
		height: 60px;
		background: #fff;
		border-radius: 50%;
		margin-right: 30px;
	}
	
	.fixed-footer .contact a:before {
		content: content: "\e158";
		font-family: "Material Symbols Outlined";
		font-variation-settings: "FILL" 1, "wght" 500, "GRAD" 0, "opsz" 20;
		font-size: 3.4rem;
		margin: 0 auto;
		position:absolute;
		top: 50%;
		left: 50%;
		transform: translate(-50%, -50%);
		color: var(--text-color);
	}
	
	.fixed-footer .insta .sns-icon {
		position: absolute;
		width: 30px;
		height: 30px;
		top: 50%;
		left: 50%;
		transform: translate(-50%, -50%);
		background: var(--text-color)
	}
}

.form-btn input {
    background: var(--main-color);
}

/* -------- under -------- */
.blog-content h2:not([class]), .page-content h2:not([class]),
.blog-content h3:not([class]), .page-content h3:not([class]),
.blog-content h4:not([class]), .page-content h4:not([class]) {
  margin: var(--text-margin) 0 calc(var(--text-margin) / 2);
}
body:not(.home) .page-content h2:not([class]) {
    font-size: 3.2rem;
}
body:not(.home) .page-content h3:not([class]), body:not(.home) h3.box-h3.ja {
    font-size: 2.2rem;
}
body:not(.home) .page-content h4:not([class])  {
    font-size: 2rem;
}
body:not(.home) .lead-type01 h3.box-h3.ja {
	font-size: 2.5rem;
}

/* オートクチュール・フルール・英国式フラワーアレンジメント */
.table-type02.price_table {
	overflow-x: scroll;
}

.table-type02.price_table table {
	width: calc(100% + 350px);
	table-layout: fixed;
}


.table-type02.price_table table tbody {
	width: 100%;
	display: table;
}


@media screen and (max-width: 599px) {
	.table-type02.price_table table tbody th,
	.table-type02.price_table table tbody td{
		display: table-cell;
		width: auto !important;
	}
	
	.table-type02.price_table table {
		border-collapse: separate;
	}
}

@media screen and (min-width: 1025px) {
  .tablet-only {
    display: none !important;
  }
	.pc-only02 {
	display: block !important;
	}
}

@media screen and (min-width: 600px) {
  .sp-only {
    display: none !important;
  }
}
@media screen and (max-width: 1024px) {
	body:not(.home) .page-content h2:not([class]) {
		font-size: 2.8rem;
	}
	body:not(.home) .page-content h3:not([class]), body:not(.home) h3.box-h3.ja, body:not(.home) .lead-type01 h3.box-h3.ja {
		font-size: 2rem;
	}
	body:not(.home) .page-content h4:not([class])  {
		font-size: 1.8rem;
	}
	.reverse2 {
		flex-direction: column-reverse;
	}
}
@media screen and (min-width: 600px) and (max-width: 1024px) {
	.box.row.row-2.row-wrap {
    	flex-wrap: wrap;
	}
	
	.pc-only02 {
		display: none !important;
	}
	
	.sp-only {
		display: none !important;
	}
	
	.tablet-only {
		display: block !important;
	}
}
@media screen and (max-width: 599px) {
	body:not(.home) .page-content h2:not([class]) {
		font-size: 2.3rem;
	}
	body:not(.home) .lead-type01 h3.box-h3.ja {
		font-size: 1.8rem;
	}
	.pc-only,
	.pc-only02 {
		display: none !important;
	}
	.reverse {
		flex-direction: column-reverse;
	}
	
	.tablet-only {
		display: none !important;
	}
}

/* ======================================
2024/7/11 added by tsuji
======================================== */

.box001 {
    padding: 5px 30px;
    margin: 15px 0;
    background: #F4F4F0;
}


/*------------------------------------------------------------------------------
  TABLET and SHONE
------------------------------------------------------------------------------*/
@media screen and (max-width: 1024px) {
}

/*------------------------------------------------------------------------------
  TABLET ONLY
------------------------------------------------------------------------------*/
@media screen and (min-width: 600px) and (max-width: 1024px) {
}

/*------------------------------------------------------------------------------
  SPHONE ONLY
------------------------------------------------------------------------------*/
@media screen and (max-width: 599px) {
}