@charset "UTF-8";



@font-face {
	font-family: 'MyYuGothicM';
	font-weight: normal;
	src: local('YuGothic-Medium'), /* PostScript Name = localの正式な指定方法 */
	local('Yu Gothic Medium'),     /* PostScript Nameを認識できないChrome用にFull Nameを指定 */
	local('YuGothic-Regular');     /* 游ゴシックMediumが存在しないWindows8.1用 */
}
@font-face {
	font-family: 'MyYuGothicM';
	font-weight: bold;
	src: local('YuGothic-Bold'), /* PostScript Name = localの正式な指定方法 */
	local('Yu Gothic');          /* PostScript Nameを認識できないChrome用にFull Nameを指定 */
}


* {
	margin: 0;
	padding: 0;
    outline: 0;
	vertical-align: baseline;
	list-style: none;
}
table {
	border-collapse:separate;
	border-spacing:0;
	border:#e4e4e4 0px;
	font-size:8pt;
}

td, tr {
	vertical-align:middle;
	margin:10px;x
}

blockquote {
  padding: 10px 20px;
  margin: 0 0 20px;
  font-size: 16px;
  border-left: 5px solid #ddd;
  line-height: 180%;
  background: #f2f2f2;
  color: #555;
}

/* body */

body {
	margin:0 auto;
	font-family: Roboto,"Droid Sans","ヒラギノ角ゴ ProN W3","Hiragino Kaku Gothic ProN","メイリオ",Meiryo,sans-serif;
	font-size: 100%;
	overflow-x: hidden;
animation: fadeIn 2s ease 0s 1 normal;
 -webkit-animation: fadeIn 2s ease 0s 1 normal;
}

@keyframes fadeIn {
    0% {opacity: 0}
    100% {opacity: 1}
}

@-webkit-keyframes fadeIn {
    0% {opacity: 0}
    100% {opacity: 1}
}

th, td {
	padding:10px;
}
tr.even td {
	background:#E5ECF9;
}

hr {
	margin-top: 40px;
margin-bottom: 40px;
border: 0;
border-top: 1px solid #eeeeee;
}
img {
vertical-align: middle;
}
h1, h2, h3 {
	margin: 0px;
	padding: 0px;
	font-weight: normal;
}

h2,
h3 {
	margin-bottom: 20px;
}

h2 { 
font-size: 30px;
font-weight: 500;
line-height: 39px;
margin-bottom: 40px;
color: #333;
}

h3 {
	font-size: 22px;
	font-weight: bold;
}



iframe {
	    border: none;
    }

p { 
	margin-bottom: 20px; 
	line-height: 26px;
	font-size: 14px;

}
a img:hover { opacity: 0.7; }

a {
    color: #0070c9;
    text-decoration: none;
}

a:hover {
color: #0070c9;
-webkit-transition: color 0.25s ease-out;
transition: color 0.25s ease-out;
}


.sp-flow {
	display: none;
}

/* アニメーション アンダーライン */
.tel a,
.move-link a,
.free a,
a.link-arrow,
.content a,
.pricing-table tr.clock-icon a { text-decoration: none; } /* reset default css */

.tel a,
.move-link a,
.free a,
a.link-arrow,
.content a,
.pricing-table tr.clock-icon a {
  display: inline-block;
  line-height: 120%;
}
.tel a::after,
.move-link a::after,
a.link-arrow::after,
.content a::after,
.pricing-table tr.clock-icon a::after {
  content: "";
  display: block;
  width: 0;
  transition: width 0.3s;
  border-bottom: 1px solid #0070c9;
}

.tel a:hover::after,
.move-link a:hover::after,
.free a:hover::after,
a.link-arrow:hover::after,
.content a:hover::after,
.pricing-table tr.clock-icon a:hover::after {
  width: 100%;
}



/* color orenge */
.free a::after {
	content: "";
  display: block;
  width: 0;
  transition: width 0.3s;
  border-bottom: 1px solid #f76117;
}


 /* カスタム */
   .bold {
	   font-weight: bold;
	
   }
.space-mini {
	width: 100%;
	height: 10px;
	overflow: hidden;
}
.space-mini-mini{
	
	width: 100%;
	height: 1px;
	overflow: hidden;
}

/* color */
.white { #fff; }
.red { color: red; 
	font-weight: bold;
}
.red2 { color: #F60; }
.grey { color: #666; }
.pink { 
	color: #ff0096 !important; 
}
.gold {
color: #808000;
}


.orenge {
	color: #fe7800;
}

.italic { 
	font-style: italic;
	font-weight: bold;
}

.none { display: none; }
/* 方向 */
.right { float: right; overflow: hidden; }
.left { float: left; overflow: hidden; }
.center { 
    text-align: center; 
}
.left-img {
	float: left;
	margin: -40px 0 0 20px;
}
.space { width: 100%; height: 40px; overflow: hidden; }

.big {
	font-size: 30px;
}

 
.mini {
	font-size: 12px;
}

.sen {
	margin: 0 auto;
	width: 1000px;
}

/* header */

.sp-header,
.overlay,
.sp-plan {
	display: none;
}

header {
	padding: 10px 10px;
	width: 100%;
	overflow: hidden; 
}

.logo {
	float: left;
}
.tel {
    float: right;
	text-align: center;
	width: 239px;
	font-family :
	MyYuGothicM, /* Windows調整用 */
	YuGothic,    /* Mac用 */
	sans-serif;
	font-size: 16px;
}


@media all and (-ms-high-contrast: none){
  .menu > ul > li:last-child {
    margin-top: 0px !important; /* IE10以上 */
}

}

.fixbar {
  width: 100%;
}
.fixed .fixbar {
  position: fixed;
  margin: 0 auto !important;

  }
.header.fixed  {
	  top: 0px;
	  position: fixed;
	  z-index: 99999999;
	  width: 100%;
	  background-color: #fff;
  }

img {
-webkit-transition: -webkit-transform 0.5s ease;
	-moz-transition: -moz-transform 0.5s ease;
	-o-transition: -o-transform 0.5s ease;
	-ms-transition: -ms-transform 0.5s ease;
	transition: transform 0.5s ease;
	}
	
	/* top anime */

.img-wrap {
  overflow: hidden;
}

.cover1,
.cover2,
.cover3 {
  animation: cover 2s cubic-bezier(.4, 0, .2, 1) forwards;
  background: #fff;
  height: 33.4%;
  left: 0;
  pointer-events: none;
  position: absolute;
  right: 0;
  z-index: 1;
}

.cover1 {
  top: 0;
}

.cover2 {
  animation-delay: .2s;
  top: 33.333333%;
}

.cover3 {
  animation-delay: .4s;
  top: 66.666666%;
}

@keyframes cover {
  100% {
    transform: translateX(100%);
  }
}



/* top main banner */

.sp-top {
	display: none;
}

.top-banner {
	overflow: hidden;
	position: relative;
}
.top-banner h1 {
    color: #464646;
    font-size: 38px;
    font-weight: 350;
    font-family: "SF Pro JP","SF Pro Display","SF Pro Icons","Hiragino Kaku Gothic Pro","ヒラギノ角ゴ Pro W3","メイリオ","Meiryo","ＭＳ Ｐゴシック","Helvetica Neue","Helvetica","Arial",sans-serif;
    position: absolute;
    top:32%;
    left: 11.8%;
    line-height: .96875;
    letter-spacing: .004em;
    border-bottom: solid 1px #ccc;
    padding-bottom: 2px;
}

.top-banner h2 {
    color: #464646;
    font-family: "SF Pro JP","SF Pro Display","SF Pro Icons","Hiragino Kaku Gothic Pro","ヒラギノ角ゴ Pro W3","メイリオ","Meiryo","ＭＳ Ｐゴシック","Helvetica Neue","Helvetica","Arial",sans-serif;
    position: absolute;
    top:37.5%;
    left: 12%;
    margin: 10px 0 0 0;
    padding: 0;
    font-size: 20px;
    font-weight: 200;
}

.top-banner p {
    color: #808000;
    position: absolute;
    top:61%;
    left: 12%;
    font-size: 19px;
    font-weight: 200;
    letter-spacing: .08em;
    line-height:1.63em
    }

/* fade up */
.fade-up {
  transition: opacity 0.7s;
  -moz-transition: opacity 0.7s;
  -webkit-transition: opacity 0.7s;
  -o-transition: opacity 0.7s;
  transition: transform 0.7s;
  -moz-transition: transform 0.7s;
  -webkit-transition: transform 0.7s;
  -o-transition: transform 0.7s;
}

/* */

.white-bg{
	padding-top: 60px;
	width: 100%;
	margin: 0 auto;
	overflow: hidden;
}

.ln-bg{
	width: 1000px;
margin: 0 auto;
}

.lnb{
	float: left;
	padding: 0 40px;
	width: 580px;
}
.ln{
	float: left;
	padding: 0 40px;
	width: 380px;
}

a dl:hover {
opacity: 0.6;
}

dl{
    overflow: hidden;
    font-size: 30px;
    font-weight: 400;
    line-height: 140%;
    clear: both;
}

dt{
    float: left;
    clear: left;
    width: 70px;
    font-size: 10px;
    line-height: 18px;
    margin-right: 15px;
}

dd{
    float: left;
    font-weight: bold;
    font-size: 12px;
    width: 210px;
}

.lnb dd{
    width: 410px;
}

.more-btn span{
  display: inline-block;
  color: #333;
  cursor: pointer;
  text-align: center;
  font-size: 17px;
font-weight: bold;
line-height: 1;
text-shadow: 0 1px 0 #fff;
filter: alpha(opacity=20);
opacity: .2;
padding-bottom: 10px;
margin-left: -40px;
}


.latest a{
	text-decoration: none;
}

.latest a:hover {
	opacity: 0.6;
}





.latest ul{
	position: relative;
-ms-flex-align: center;
align-items: center;
width: 100%;
}

/* content add */


.content-bg {
	  width: 100%;
	  background-color:#F0F8FF;
	  margin: 0 auto 60px;
}
 
.content-box {
	width: 1000px;
	margin: 0 auto 60px;
}

.content-box-mini {
    width: 650px;
    margin: 0 auto;
    }
    
	.content-box-mini ul,
	.content-left ul {
		display: flex;
		margin: 0 !important;
	}
	
	.content-box-mini h5,
	.content-left h5 {
		font-weight: bold;
	}
	.content-box-mini ul li a,
	.content-left ul li a {
		padding: 10px;
		font-size: 1.4rem;
	}
	
	.content-left ul li {
	border: none !important;
	    margin: 0 !important;
	    }
	    
	.content-box-mini p {
		margin-top: 20px; 
	}
	
.middle-size p {
	font-size: 16px;
}

.text p{
    line-height: 180%;
    padding-left: 1em !important;
    text-indent: -1em;
}

.back {
	padding: 10px 20px;
	border: solid 1px #0070c9;
}

.back:hover {
	background: #0070c9;
	color: #fff;
}


/* paln */


.wrapper {
  font-weight: 400;
  padding-top: 40px;
  color: #9f9f9f;
  font-size: 15px;
  width: 1150px;
  margin: 0 auto 30px;
  overflow: hidden;
}

.package {
  box-sizing: border-box;
  width: 19%;
  border: 2px solid #e8e8e8;
  border-radius: 7px;
  display: inline-block;
  padding: 10px 10px 0;
  text-align: center;
  float: left;
  -webkit-transition: margin-top 0.5s linear;
  transition: margin-top 0.5s linear;
  position: relative;
  margin-right: 1%;
}

.package:nth-of-type(1) {
	margin-left:6px;
}
.package:nth-of-type(5) {
	margin: 0;
}


.package:hover {
  margin-top: -15px;
  -webkit-transition: margin-top 0.3s linear;
  transition: margin-top 0.3s linear;
}

.package ul li {
	text-align: center;
	font-size: 15px;
	color: #333;
	line-height: 150%;
}

.package ul li:last-child {
	border-bottom: none;
	padding: 0;
}

.package .sub {
	font-size: 14.5px;
	font-weight: bold;
	padding-bottom: 10px;
	color: #b6b07c;
	line-height: 140%;
}

.plan-bg {
	background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#f9f8f1), color-stop(100%,#f4f2e2));
	margin: -10px;
	padding: 10px;
}

.plan td a {
	color: #fff;
	text-decoration: none;
}
.plan td a:hover {
opacity: 0.6;
}


.name {
  color: #565656;
  font-weight: bold;
  font-size: 18px;
  margin-top: -5px;
}

.name-1 {
	background: url(/images/green_pattern.png) repeat-x;
	color: #fff;
	font-size: 20px;
	border-radius: 2px;
	margin: -10px -10px 20px ;
	padding: 20px;
	font-weight: bold;
}

.name-2 {
	background: url(/images/coniro.png) repeat-x;
	color: #fff;
	font-size: 20px;
	border-radius: 2px;
	margin: -10px -10px 20px ;
	padding: 20px;
	font-weight: bold;
}

.name-3 {
	background: url(/images/gold.png) repeat-x;
	color: #fff;
	font-size: 20px;
	border-radius: 2px;
	margin: -10px -10px 20px ;
	padding: 20px;
	font-weight: bold;
}


.price {
  margin: 0 0 10px 0;
  font-weight: bold;
  color: #b6b07c;
}

/*.price::after {
  content: " / 月";
  font-weight: normal;
}*/

.yen {
	font-size: 23px;
}


#plan ul {
  list-style: none;
  padding: 0;
  text-align: left;
  margin: 29px 0 0;
}

#plan li {
padding-bottom: 10px;
  margin-bottom: 10px;
  border-bottom: dotted 1px #ddd;
}

#plan li:last-child {
	border-bottom: none;
}
.checkIcon {
  font-family: "Font Awesome 5 Free";
  font-weight : 900;
  content: "\f00c";
}


.brilliant {
  border-color: #33c4b6;
}


/* Triangle */
.brilliant::before {
  width: 0;
  height: 0;
  border-style: solid;
  border-width: 64px 64px 0 0;
  border-color: #3bc6b8 transparent transparent transparent;
  position: absolute;
  left: 0;
  top: 0;
  content: "";
}
.brilliant::after {
  font-family: "Font Awesome 5 Free";
  font-weight : 900;
  content: "\f00c";
  color: white;
  position: absolute;
  left: 9px;
  top: 6px;
  text-shadow: 0 0 2px #37c5b6;
  font-size: 1.4rem;
}

/* btn */

#plan .btn {
	background-color: #ff8042;
	padding: 10px 0px;
	color: #fff;
	width: 100%;
	border-radius: 5px;
	display: block;
	margin-bottom: 10px;
}

#plan h2 {
	font-size: 30px;
font-weight: 500;
line-height: 39px;
margin-bottom: 40px;
color: #333;
letter-spacing:0.8pt;
}

#plan h3 {
	line-height: 170%;
	font-size: 16px;
	font-weight: normal;
	letter-spacing:0.8pt;
}

#plan .orenge {
	font-size: 23px !important;
}




#plan {
	margin: 30px auto;
	width: 1115px;
}

.pricing-table { min-width: 670px; }

.pricing-table td {
	position: relative;
	display: inline-block;
	margin: 0 5px;
	vertical-align: text-top;
}


/* Plan Title */
.pricing-table thead .plan td {
	width: 210px;
	height: 65px;
	padding: 0;
	text-align: center;
    -webkit-border-radius: 2px;
	-moz-border-radius: 2px;
	border-radius: 2px;
}

.pricing-table thead .plan h2 {
	font-family: 'Arial Black', Arial, Helvetica, sans-serif;
	font-weight: bold !important;
	font-size: 20px !important;
	text-transform: uppercase;
	color: #fff !important;
	padding: 15px 0;
}



.pricing-table thead .plan .green {
	color: #ffffff;
	text-shadow: 1px 1px 0px rgba(255,255,255, .2);
	background: url(/images/green_pattern.png) repeat-x 0 0;
}

.pricing-table thead .plan .coniro {
	color: #ffffff;
	text-shadow: 1px 1px 0px rgba(255,255,255, .2);
	background: url(/images/coniro.png) repeat-x 0 0;
}

.pricing-table thead .plan .gold {
	color: #ffffff;
	text-shadow: 1px 1px 0px rgba(255,255,255, .2);
	background: url(/images/gold.png) repeat-x 0 0;
}

.pricing-table thead .plan .orange {
	color: #fafafa;
	text-shadow: 1px 1px 2px rgba(0,0,0, .4);
	background: url(/images/orange_pattern.png) repeat-x 0 0;
}



/* Plan Price Section */
.pricing-table thead .price td {
	position: relative;
	width: 210px;
	padding: 0px 10px 90px; /* グレーの背景の高さ調整（下部） */
	font-family: 'Arial Black', Arial, Helvetica, sans-serif;
	font-weight: bold;
	text-transform: uppercase;
	text-align: center;
	color: #b6b07c;
	background: #f9f8f1;
	background: -moz-linear-gradient(top,  #f9f8f1 0%, #f4f2e2 100%);
	background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#f9f8f1), color-stop(100%,#f4f2e2));
	background: -webkit-linear-gradient(top,  #f9f8f1 0%,#f4f2e2 100%);
	background: -o-linear-gradient(top,  #f9f8f1 0%,#f4f2e2 100%);
	background: -ms-linear-gradient(top,  #f9f8f1 0%,#f4f2e2 100%);
	background: linear-gradient(to bottom,  #f9f8f1 0%,#f4f2e2 100%);
}

.pricing-table thead .price p {
	display: table;
	margin: 0 auto;
	font-size: 23px;
	line-height: 60px; /* グレー背景色高さ調整（価格の上部） */
}

.pricing-table thead .price p span {
	font-size: 0.7em;
	display: table-cell;
	vertical-align: middle;
}

.pricing-table thead .price span { 
        font-size: 14px;
}


.pricing-table thead .price span.red { 
        font-size: 14px;
color:#464646;
}


 /* お申込み背景デザイン */
.pricing-table thead .price a {
	display: block;
	position: absolute;
	top: 110px; /* お申込みボタンの上部余白調整 */
	line-height: 32px;
	font-size: 15px;
letter-spacing:1.6pt;
color:#0070c9;
	text-decoration: none;
	display: block;
margin:10px 0px 0 -10px;
width: 215px;
height: 41px;
background: url(/images/ribon-top.png);
color: #fff;
padding-top: 3px;
}


.pricing-table thead .price .green a {
	color: #37621f;
	text-shadow: 1px 1px 0px rgba(255,255,255, .2);
	background: #82d344;
	background: -moz-linear-gradient(top,  #82d344 0%, #51af34 100%);
	background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#82d344), color-stop(100%,#51af34));
	background: -webkit-linear-gradient(top,  #82d344 0%,#51af34 100%);
	background: -o-linear-gradient(top,  #82d344 0%,#51af34 100%);
	background: -ms-linear-gradient(top,  #82d344 0%,#51af34 100%);
	background: linear-gradient(to bottom,  #82d344 0%,#51af34 100%);
}



/* Plan Features Section */
.pricing-table tbody tr:first-child td:before {
	position: absolute;
	display: block;
	content: '';
	width: 100%;
	height: 15px;
	top: -25px;
	left: 0;
	background: url(/img/stripe.png) repeat-x 0 0;
}

.pricing-table tbody td {
	width: 170px;
	padding-left: 40px;
	line-height: 30px;
	border-top: 1px solid #999999;
	font-family: Helvetica, Arial, sans-serif;
	font-size: 13px;
	color: #828282;
}

.pricing-table tbody tr:first-child td { border-top: 20px solid #ffffff; }
.pricing-table .clock-icon td,
.pricing-table .basket-icon td,
.pricing-table .star-icon td,
.pricing-table .heart-icon td,



/* Plan Description Section */
.pricing-table tfoot td {
	width: 210px;
	padding: 10px 10px;
	text-align: center;
	line-height: 18px;
    font-family: Helvetica, Arial, sans-serif;
	font-size: 14px;
	color: #333333;

}


.table-float {
	display: block;
	position: absolute;
	width: 300px;
	padding: 80px 0 0 0;
	top: 85%;
	left: 130px;
}

.table-float p {
	font-family: Lobster13Regular, sans-serif;
	font-size: 16px;
	color: #464646;
	line-height: 20px;
}

.table-float p.big {
	font-size: 23px;
	color: #f76117;
	text-align: right;
	line-height: 30px;
}

.table-float .arrow {
	display: block;
	position: absolute;
	top: 0;
	left: 50px;
	width: 68px;
	height: 77px;
	background: url(/img/arrow.png) no-repeat 0 0;
}

.no1-tag {
		position: absolute;
		top:0;
		right: 0;
		z-index: 99;
	}


/* お申し込み拡大 */

a .up-txt {
    display: inline-block;
    color: #FFF;
    -webkit-transition: 0.5s;
    -moz-transition: 0.5s;
    -o-transition: 0.5s;
    -ms-transition: 0.5s;
    transition: 0.5s;
}
 
a:hover .up-txt {
    color: #FFF;
    -webkit-transform: scale(1.5);
    -moz-transform: scale(1.5);
    -o-transform: scale(1.5);
    -ms-transform: scale(1.5);
    transform: scale(1.2);
}



.free {
position: absolute;
right: 70px;
width: 240px;
margin-top: -45px;
}

.free-suji {
	margin-left: 0px !important;
	font-size: 15px;
}

.free-txt {
	font-size: 15px;
	color: #333;
	margin-left: -90px;
}

.free-suji {
	margin-left: 100px;
	font-size: 20px;
	color: #f76117;
}

.free-suji:hover {
	color: #f76117;
}
.zi {
	z-index: 9;
}

/* top content 2 */

.content {
	width: 1000px;
	margin: 0 auto 80px;
	overflow: hidden;
	display: flex;
}

.content2 {
	width: 100%;
	margin: 0 auto;
	overflow: hidden;
	padding: 50px 0;
	background: #f2f2f2;
	border-bottom: solid 1px #ddd;
}

.content p,
.content2 p {
	color: #333;
 font-size: 15px;
line-height:1.63em;
letter-spacing:0.6pt;
	padding-left: 30px;
padding-right: 30px;

}

.content2 h2 {
	font-size: 27px;
font-weight: 500;
line-height: 39px;
margin-bottom: 40px;
color: #333;
letter-spacing:0.8pt;
}


/* banner 2 */

.banner2 {
	width: 100%;
	position: relative;
}

.banner2 h2 {
    color: #464646;
    font-size: 38px;
    font-weight: 350;
    font-family: "SF Pro JP","SF Pro Display","SF Pro Icons","Hiragino Kaku Gothic Pro","ヒラギノ角ゴ Pro W3","メイリオ","Meiryo","ＭＳ Ｐゴシック","Helvetica Neue","Helvetica","Arial",sans-serif;
    position: absolute;
    top:25%;
    left: 33%;
    line-height: .96875;
    letter-spacing: .004em;
}

.banner2 p {
    color: #808000;
    position: absolute;
    top:50%;
    left: 35%;
    font-size: 19px;
font-weight: 200;
letter-spacing: .08em;
}



/* new top */


.row {
	width: 90%;
	position: relative;
	margin: 0 auto;
}

.col-md-4 {
	float: left;
	margin: 0 auto;
	width: 33.333333%;
	padding: 0 20px;
}

.col-md-4 h3 {
	text-align: center;
	line-height: 250%;
	margin: 0;
	padding: 0;
	font-size: 16px;
}

/* .link-arrow::after {
content: "\f105";
  font-family: "Font Awesome 5 Free";
  font-weight : 900;
  padding-left: 5px;
} */

.bg-grey {
 background: #f2f2f2;
}
    
/* btn */

.btn-info {
    color: #fff;
    background-color: #5bc0de;
    border-color: #46b8da;
}
a.btn-info:hover {
	color: #fff;
	text-decoration: none;
	opacity: 0.8;
}
.btn {
    display: inline-block;
    padding: 6px 12px;
    margin-bottom: 0;
    font-size: 14px;
    font-weight: 400;
    line-height: 1.42857143;
    text-align: center;
    white-space: nowrap;
    vertical-align: middle;
    -ms-touch-action: manipulation;
    touch-action: manipulation;
    cursor: pointer;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
    background-image: none;
    border: 1px solid transparent;
    border-radius: 4px;
}


.read-more {
    position: absolute;
    bottom: 0; 
    left: 50%;
    width: 800px;
    text-align: center;
    margin: 0; padding: 30px 0; 
    font-size: 20px;
/* "transparent" only works here because == rgba(0,0,0,0) */
    background:#2659a7;
    margin: 0 0 0 -400px;
    border-radius: 5px;
}
.read-more a {
	    color: #fff;
	    font-weight: bold;
	    display: block;
}

.read-more:hover {
opacity: 0.9;
}



/* side */


/* new plan */

.start {
	background:url(/images/green_pattern-side.png) repeat-x;
}
.start-color {
	color: #ff8522;
}


.economy {
	background:url(/images/green_pattern-side.png) repeat-x;
}

.economy-color {
	color: #ff8522;
}


.standard {
	background:url(/images/coniro-side.png) repeat-x;
}

.standard-color {
	color: #0080c0;
}


.business {
	background:url(/images/coniro-side.png) repeat-x;
	}
	
	
.business-color {
	color: #0080c0;
}


   
.executive {
	background:url(/images/gold.png) repeat-x;
}

.executive-color {
	color: #72640c;
}


.side {
	float: right;
	width: 280px;
	overflow: hidden;
	padding: 0 15px;
	border: solid #E1E1E1 1px;
    border-radius: 4px 4px 0 0;
    border-top-left-radius: 4px;
    border-top-right-radius: 4px;
    border-bottom-right-radius: 0px;
    border-bottom-left-radius: 0px;
    margin-bottom: 20px;

}

.side h2 {
background-color: #eee;
color: #000;
padding: 15px;
font-size: 16px;
text-align: center;
margin: 0 -15px 20px;
border-radius: 4px 4px 0 0 ;
    border-top-left-radius: 4px;
    border-top-right-radius: 4px;
    border-bottom-right-radius: 0px;
    border-bottom-left-radius: 0px;
}

.side p {
	font-size: 70%;
}



.start-plan {
	padding: 15px;
	text-align: center;
	color: white;
	display: block;
	font-size: 100%;
	font-weight: bold;
}
.start-plan:hover {
	opacity: 0.6;
}

a.start-plan {
	text-decoration: none !important;
	color: #fff !important;
	margin-bottom: 20px;
}

.side-plan {
	background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#f9f8f1), color-stop(100%,#f4f2e2));
	position: relative;
}


.side-plan p {
padding: 0 10px 20px;
	font-size: 14px !important;
font-weight: bold;
line-height: 140%;
color: #b6b07c !important;
text-align: center;
}

.side .yen {
    color: #b6b07c;
    font-size: 23px;
}
.side .price {
    margin: 0 0 10px 0;
    font-weight: bold;
    color: #b6b07c;
}

.side-ribon {
display: block;
margin:10px 0px 0 -10px;
width: 251px;
height: 41px;
	background: url(/images/side-ribon.png);
}
a.side-ribon {
	padding-top: 8px;
	color: #fff !important;
}



/* ////////////// footer */



.content-wrap {
width: 1000px;
margin: 0px auto;
padding: 0px;
}

/* footer */


#footer {
    width: 100%;
    position: relative;
    background: -webkit-linear-gradient(#030512 0%, #112b4c 100%);
    background: -moz-linear-gradient(#030512 0%, #112b4c 100%);
    background: -ms-linear-gradient(#030512 0%, #112b4c 100%);
    padding: 20px 0 0px;
    overflow: hidden;
    line-height: 20px;
}

.foot-content {
	width: 90%;
	margin: 0 auto;
	display: flex;
	flex-flow: space-around;
}

.footcon {
	width: 22%;
    margin: 1.5%;
}

.footcon h5 {
	color: #f2f2f2;
	font-size: 15px;
	margin-bottom: 10px;
	padding-bottom: 10px;
	letter-spacing: .1rem;
	font-weight: bold;
	border-bottom: 1px solid #ddd;
}

.footcon ul {
	margin-bottom: 30px;
}


.footcon li a {
	color: #DDD !important;
	font-size: 13px;
	line-height: 190%;
}


/* ////////////// copyright */

#copyright {
overflow: hidden;
width: 100%;
background-color: #000;
margin: auto;
padding: 15px 0 ;
}


.copyright {
color: #fff;
margin: 0 auto;
text-align: center;
width: 1000px;
font-size: 16px;
line-height: 250%;
}

.copy-body,
.copy-link {
	display: initial;
}

.copyright a {
	padding: 20px;
	color: #fff;
}



 .copy {
font-size: 11px;
margin: 0;
padding: 0;
text-align: center;
color: #fff;
}

.warning-bottom {
font-size: 9px;
display:inline-block;
text-align: center;
width: 100%;
color: #fff;
padding-bottom: 20px;
}

#copyright .by {
color: #fff;
text-align: center;
font-size: 8px;
}

.row-fluid {
width: 100%;
}
.row-fluid [class*="span"]:first-child {
margin-left: 0px;
}

.row-fluid [class*="span"] {
display: block;
float: left;
width: 100%;
min-height: 30px;
margin-left: 2.12766%;
box-sizing: border-box;
}
.row-fluid .span4 {
width: 31.9149%;
}
.row-fluid .span2 {
width: 14.8936%;
}

/* arrow */

#topcontrol {
	right: 20px !important;
	bottom: 20px !important;
}

.sp-footer {
	display: none;
}

/* bottom contact */

.bottom-contact {
	width: 100%;
	background-size:cover;
	background-image: url(/images/bottom-bg.jpg);
}

.bottom-cover {
background-color: rgba(0,0,0,0.4);
overflow: hidden;
padding: 90px 0;
}

.bottom-contact h3 {
	text-align: center;
	font-size: 18px;
	color: #fff;
}

.bottom-contact p {
	text-align: center;
	color: #fff;
}

/* column */

.white-bg {
	background-color: #fff;
	padding: 50px 0 40px;
}

.col-md-12 {
	width: 800px;
	margin: 0 auto;
	float: none;
}

.column {
	overflow: hidden;
	position: relative;
	width: 100%;
}

.column li {
	overflow: hidden;
	margin-bottom: 20px;
}

.column li h3 {
	font-size: 14px;
	padding-top: 15px;
	margin: 0 0 5px;
}

.link-three {
	color: #333;
	text-decoration: none;
}

.column li p {
	font-size: 13px;
	line-height: 150%;
}

.column li a {
	font-size: 13px;
}
time {
	color: rgb(153, 153, 153);
	font-weight: normal;
}
.sp-banner {
	display: none;
}

/* up date */


.content-left h3,
.content-box-mini h3 {
     font-weight: bold !important;
    font-size: 14px !important;
    margin: 0 !important;
    padding: 10px !important;
    line-height: 120% !important;
}


@media (max-width: 768px) { 

  /* スマホ用のスタイル */
  
  .sp-none,
  .pc-none,
  .bottom-contact {
	  display: none;
  }
  
  
  
 .sp-flow,
  .sp-plan,
  .sp-banner {
	  display: inherit;
  }
  
  body {
	  overflow-x: hidden;
  }
  
 
    .sp-none,
  .bottom-contact {
	display: none;
} 

.tel,
  .menu-logo {
	  display: none !important;
  }
  
  .pc-none {
	display: inherit;
}

  
   .logo {
	  text-align: center;
	      margin: 0 auto;
    width: 100%;
  }
  .tel {
	  float: none;
	  margin: 0 auto;
	  text-align: center;
  }
  
  
    /* menu */
  
  .menu > ul {
	  width: 100%;
  }
  
  a.menu-mobile {
	  color: #fff;
  }
  
  a.menu-mobile:hover {
	  opacity: 0.6;
  }
  

  
  .menu-dropdown-icon:before {
	  background: transparent;
	  color: #fff;
	  content: "\f067" !important;
	  font-family: "Font Awesome 5 Free";
      font-weight : 900;
  }
  
  .menu > ul > li > ul > li {
	  margin: 0;
	  border-top: solid 1px #000;
  }
  .menu > ul > li > ul > li a {
	  color: #333;
	  background-color: #fff !important;
  }
  
  .menu > ul > li > ul > li a:hover {
  background : rgba(255,255,255,0.95) !important;
  }

  
  /* content */
  
h2.center, 
#plan h2 {
    padding: 0 20px;
    font-size: 20px;
    line-height: 150%;
}

.content-box-mini {
	width: 100%;
	padding: 0 20px;
}

    
    .content-box-mini ul {
		display: inline-block;
	}
	
	.content-left ul {
		padding: 0 20px !important;
		display: inherit;
	}
	
	.content-box-mini li {
	    float: left;
	    display:flow-root;
	    	}
	    	
	    	.content-left li {
	    	display: inline-block;
	    	}

.content-left ul li a {
	display: inline-block;
}
  
  #plan,
  .sen {
	  width: 100% !important;
  }
  
  .top-banner img {
	  display: block;
  }
  
  .content {
	  display: block;
	  margin: 0 auto 40px;
  } 
  
  .content p {
	  padding: 0 20px;
  }
  
  .content.sp-img img {
	  margin-bottom: 20px;
  } 
  
  .banner2 h2 {
	  top: auto;
	  left: auto;
	  font-size: 16px;
	  padding: 20px;
  }

.top-banner {
    position: inherit;
    margin-bottom: 40px;
}

  
  .top-banner h1,
  .top-banner h2,
  .top-banner p {
	display: none;
  }
  
.sp-top {
	display: inherit;
	padding: 0 20px;
}

.sp-top h1 {
color: #464646;
border-bottom: solid 1px #ccc;
font-size: 24px;
margin: -20px 0 0px;
padding-bottom: 0px;
}

.sp-top h2 {
color: #464646;
	font-weight: 200;
	padding: 0 !important;
	margin: 0 0 5px !important;
}
.sp-top p {
	color: #808000;
	letter-spacing: 0.8;
	font-size: 16px;
}
  
  .banner2 p {
	   top: auto;
	  left: auto;
	  font-size: 14px;
	  padding: 20px;
	  margin-top: 50px;
	  position: relative;
  }
  
  .col-md-4 {
	  width: 100%;
  }
  
  .left-img {
    float: none;
    margin: 0 auto 20px;
    text-align: center;
}
  
 /* footer */
 
 #copyright {
	 margin: 0;
	 padding: 20px 0 0px;
 }
  
.copyright,
.content-wrap,
.bottom-link {
	width: 100%;
}

.span2 {
	width: 48% !important;
padding: 0 20px;
margin: 0 0 10px !important;
}

.span3 {
	width: 48% !important;
padding: 0 20px;
margin: -30px 0 10px !important;
}


.content-box-mini p {
    line-height: 300%;
}

.copy {
	padding: 0 20px 15px;
}

.bg-grey-content,
.bg-grey-content2,
.content,
.content-top,
.content-one {
	width: 100%;
}

.bg-grey-content,
.bg-grey-content2 {
	padding: 20px;
}


 /* footer sp */

.foot-content {
	display: inherit;
}

.footcon {
	width: 100%;
	width: 44%;
    float: left;
}

.footcon h5 {
	font-size: 13px;
}

.footcon li a {
	font-size: 11px;
}

.footcon-sp {
	margin-left: 6%;
}


.sp-footer {
	display: inherit;
}

.sp-footer ul {
	width: 100%;
	position: relative;
	margin: 0px;
	overflow: hidden;
		border-bottom: solid 1px #eee;
	border-top: solid 1px #eee;
}

.sp-footer li {
	float: left;
	width: 33.33333%;
	margin: 0 auto;
	border-left: solid 1px #eee;
	overflow: hidden;
}

.sp-footer li:first-child {
border-left: none;
}

.sp-footer li a {
	text-align: center;
	padding: 0;
	display: block;
	text-decoration: none !important;
	padding: 10px !important;
	font-size: 12px;
	line-height: 180%;
}

.sp-footer li a:hover {
 background-color: #20ec00;
	}

.sp-footer li .fa {
	font-size: 22px;
	color: #20ec00;
}

.sp-footer li:hover .fa{
	color: #fff;
}

.sp-footer p {
	margin-bottom: 15px;
}


/* one カラム */

.sp-img img {
	width: 100%;
}

.customer-img img {
	width: 100%;
	height: auto;
}

.main-1column {
	border: none;
}

.box-one {
	padding: 0;
}

#container h1 {
	margin: 20px 0 10px;
}

dt,
dd {
	font-size: 14px;
}

.flow-content {
	border: none;
	padding: 0;
}

.flow-content h3 {
	margin: 0;
	font-size: 15px;
}

.flow li {
	width: 100%;
}

.flow li:nth-child(2) {
	padding: 0;
	margin: 0;
	border: none;
}

/* table */

.sp-td {
width: 23% !important;
}

.table-bordered > tbody > tr > td, .table-bordered > tbody > tr > th, .table-bordered > tfoot > tr > td {
	border: 0.5px solid #ddd;
}

td.table-left {
	width: 30%;
}
/* btn */
.application .btn-lg {
	 font-size: 14px !important;
 }


 /* 2カラム */
  
  #container {
	  width: 100% !important;
	  margin: 0 !important;
	  padding: 0;
  }
  
  .main {
	  width: 100% !important;
	  margin: 0 !important;
	  border: none;
  }
  
  .phone a.right {
  float: none;
  display: block;
  padding-top: 10px;
	  margin: 0 auto;
	  text-align: center;
  }
  
  a.right {
  float: none;
  padding: 10px;
  display: block;
  text-align: center;
  }
  
  /* plan */
  
  .main-1column,
  iframe,
  .audiojs {
	  width: 100%;
  }
  
  .table-left img {
	  width: 80px;
  }
  
  .title-form {
    font-size: 20px !important;
    }
  
  /* map */
  
  table.map td {
	  width: 33.33333%;
  }
  
   table.map td img {
	   width: 100%;
   }
   
   /* site map */
   .sitemap-list li {
	   font-size: 13px;
   }
  
/* side */

.side {
	border: none;
	width: 100%;
}

.side-ribon {
    margin: 15px auto 0;
    }
    
    /* map */
    
    #map {
	    display: none;
    }

/* footer */

.span2 h5 {
	font-size: 13px;
}

.span2 li {
	font-size: 11px;
}

.copyright {
	font-size: 14px;
}


.copy-link,
.copy-body {
	display: none;
}

.copy {
    font-size: 10px;
    }

/* arrow */
#topcontrol img {
	width: 40px !important;
	height: 40px !important;
}
#topcontrol {
right: 5px !important;
	bottom: 65px !important;
	}

/* side */

.side {
	border: none;
	width: 100%;
}

.side-ribon {
    margin: 15px auto 0;
    }
    
.free {
    position: inherit !important;
    right: auto !important;
    width: 100%;
    margin-top: 0px !important;
    text-align: center;
    }

.free img {
	margin-top: -70px;
}
    
.free-txt {
	margin: 0 auto 20px;
}

.big {
	font-size: 22px;
}


.w-bg {
	background-color: #fff !important;
	border-left: #eee solid 1px ;
	border-right: #eee  solid 1px;
}

.col-md-12 {
	width: 100%;
	}
	
	

.sp-top h1 { 
	margin: -20px 0 10px 0 !important;
	border: none;
}

.sp-top h2 {
	margin-bottom: 15px !important;
}

.content-wrap2{
	width: 100%;
 
  }
.more-btn span{
	margin-left: 0px;
}

.ln-bg{
	width: 100%;
}
.lnb dd,
dd{
    width: 75%;
}

.ln,
.lnb{
	width: 100%;
	padding: 0 20px;
	margin-bottom: 30px;
}

.content-box {
	width: 100%;
	padding: 0 15px;
}

.middle-size p {
	font-size: 14px;
}

.space {
	display: none;
}


}


@media screen and (max-height: 30.5em) {
	.overlay nav {
		height: 70%;
		font-size: 34px;
	}
	.overlay ul li {
		min-height: 34px;
	}
}


@media(min-width: 768px) {
  


.sp-top {
	text-align: center;
}
.sp-top h1 {
	border: none;
	font-size: 26px;
}

#trigger-overlay img {
    width: 100%;
    padding-top: 15px;
}

.header.fixed .menu > ul {
	width: 100%;
	
}

}



/* iPhone 5 - 568px*/
@media only screen
and (min-device-width:320px)
and (max-device-width:568px) {


.sp-top h1 {
margin-top: -80px;
	font-size: 20px;
	border: none;
}

.sp-top h2 {
	font-size: 11px !important;
}

.sp-top p {
	font-size: 14px;
	}

.copyright a {
    padding: 10px;
    }

.overlay ul li {
	font-size: 11px;
}


.btn-success {
    font-size: 13px;
    }

td.table-left,
.table-right {
padding: 0 10px !important;
} 


w.a {
	word-wrap: break-word;
  white-space: normal;
}

a:-webkit-any-link {
	text-decoration: none;
}

    
}



@media(min-width: 375px) { 
	.sp-top h1 {
	margin-top: -85px;
	font-size: 23px;
}

.sp-top h2 {
	font-size: 13px !important;
}

}


@media(min-width: 414px) { 
	.sp-top h1 {
	margin-top: -95px;
	font-size: 26px;
}
.sp-top h2 {
	font-size: 15px !important;
}
}



/* =========================
   Japan Area (Readable)
========================= */
.jp-area{
  max-width: 1120px;
  margin: 0 auto;
  padding: 36px 16px;
}

.jp-area__head{
  text-align: center;
  margin-bottom: 18px;
}

.jp-area__title{
  font-size: 28px;
  line-height: 1.3;
  margin: 0 0 10px;
  letter-spacing: .02em;
}

.jp-area__lead{
  margin: 0 auto;
  max-width: 860px;
  line-height: 1.9;
  color: #333;
}

/* 2カラム（左：リンク 右：地図） */
.jp-area__grid{
  display: grid;
  grid-template-columns: 1.25fr 0.75fr;
  gap: 18px;
  align-items: start;
  margin-top: 22px;
}

/* 左：カード群 */
.jp-area__cards{
  display: grid;
  gap: 14px;
}

/* 地方カード */
.region-card{
  background: #fff;
  padding: 14px 14px 12px;
}

.region-card__title{
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 16px;
  margin: 0 0 10px;
  padding-bottom: 10px;
  border-bottom: 1px solid #eee;
}

.region-card__title::before{
  content: "";
  width: 8px;
  height: 8px;
  border-radius: 999px;
  background: #333;
  opacity: .25;
}

/* 県リンク＝チップ */
.pref-chips{
  display: flex;
  flex-wrap: wrap;
  gap: 10px 10px;
}

.pref-chip{
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 10px 12px;
  border-radius: 999px;
  border: 1px solid #ddd;
  background: #fafafa;
  text-decoration: none;
  color: #222;
  line-height: 1;
  font-size: 14px;
  transition: transform .06s ease, background .2s ease, border-color .2s ease;
}

.pref-chip:hover{
  background: #f3f3f3;
  border-color: #cfcfcf;
  transform: translateY(-1px);
  text-decoration: none;
}

/* 右：地図（固定） */
.jp-area__map{
  position: sticky;
  top: 16px;
  background: #fff;

}

.jp-area__map img{
  width: 100%;
  height: auto;
  display: block;
  border-radius: 10px;
}

.jp-area__mapNote{
  margin: 10px 0 0;
  font-size: 12px;
  color: #666;
  line-height: 1.6;
}

/* CTA */
.jp-area__cta{
  background: #f7f7f7;
  border: 1px solid #e9e9e9;
  border-radius: 14px;
  padding: 16px;
}

.jp-area__ctaText{
  margin: 0 0 12px;
  line-height: 1.9;
}

.jp-area__btn{
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 12px 16px;
  border-radius: 999px;
  text-decoration: none;
  font-weight: 700;
  border: 1px solid #cfcfcf;
  background: #fff;
  color: #111;
  font-size: 15px;
  width: 100%;
}

.jp-area__btn:hover{
  filter: brightness(.98);
}

/* SP：1カラム化 + 地図は上へ（sticky解除） */
@media (max-width: 900px){
  .jp-area__grid{
    grid-template-columns: 1fr;
  }
  .jp-area__map{
    position: static;
    order: -1;
  }
}

@media (max-width: 520px){
  .jp-area__title{ font-size: 22px; }
  .pref-chip{ padding: 10px 10px; font-size: 13px; }
}

/* Osaka modern page */
.osaka-modern-page {
  background: #f7f7f4;
  color: #111111;
}

.osaka-modern-page .top-banner {
  position: relative;
  display: grid;
  min-height: 560px;
  padding: clamp(72px, 10vw, 128px) clamp(20px, 6vw, 72px) clamp(42px, 7vw, 80px);
  align-content: end;
  background: #111111;
  color: #ffffff;
  overflow: hidden;
}

.osaka-modern-page .top-banner::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(0,0,0,0.08) 0%, rgba(0,0,0,0.62) 100%);
  pointer-events: none;
}

.osaka-modern-page .top-banner img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0.72;
}

.osaka-modern-page .top-banner h1,
.osaka-modern-page .top-banner h2,
.osaka-modern-page .top-banner p {
  position: relative;
  z-index: 1;
  width: min(940px, 100%);
  margin-right: auto;
  margin-left: auto;
  color: #ffffff;
  text-align: left;
}

.osaka-modern-page .top-banner h1 {
  margin-bottom: 18px;
  font-size: clamp(30px, 4.2vw, 48px);
  font-weight: 600;
  line-height: 1.12;
  letter-spacing: 0;
}

.osaka-modern-page .top-banner h2 {
  margin-bottom: 16px;
  font-size: clamp(16px, 1.7vw, 22px);
  font-weight: 500;
  line-height: 1.5;
  letter-spacing: 0;
}

.osaka-modern-page .top-banner p {
  margin-bottom: 0;
  color: rgba(255,255,255,0.82);
  font-size: clamp(15px, 1.6vw, 18px);
  line-height: 1.8;
}

.osaka-modern-page .sp-top {
  display: none;
}

.osaka-modern-main {
  width: min(980px, calc(100% - 48px));
  margin: clamp(72px, 10vw, 120px) auto;
}

.osaka-modern-main h2 {
  margin: clamp(52px, 7vw, 82px) 0 18px;
  color: #111111;
  font-size: clamp(24px, 3.2vw, 38px);
  font-weight: 560;
  line-height: 1.22;
  letter-spacing: -0.02em;
  text-align: left;
}

.osaka-modern-main h2:first-of-type {
  margin-top: 0;
}

.osaka-modern-main h2:not(:first-of-type) {
  padding-top: clamp(42px, 6vw, 70px);
  border-top: 1px solid #deded8;
}

.osaka-modern-main h3 {
  margin: 44px 0 14px;
  color: #111111;
  font-size: clamp(20px, 2.2vw, 28px);
  font-weight: 560;
  line-height: 1.35;
  letter-spacing: -0.015em;
}

.osaka-modern-main p {
  width: min(760px, 100%);
  margin: 0 0 20px;
  color: #333333;
  font-size: 16px;
  line-height: 1.95;
}

.osaka-modern-main a {
  color: #111111;
  text-decoration: underline;
  text-underline-offset: 4px;
}

.osaka-modern-main ul {
  width: min(820px, 100%);
  margin: 26px 0 34px;
  padding: 0;
  list-style: none;
  border-top: 1px solid #deded8;
}

.osaka-modern-main li {
  position: relative;
  padding: 15px 0 15px 30px;
  border-bottom: 1px solid #deded8;
  color: #333333;
  font-size: 16px;
  line-height: 1.75;
}

.osaka-modern-main li::before {
  content: "";
  position: absolute;
  top: 1.55em;
  left: 2px;
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: #0f766e;
  box-shadow: 0 0 0 5px rgba(15, 118, 110, 0.12);
}

.osaka-modern-main blockquote {
  width: min(820px, 100%);
  margin: 36px 0;
  padding: 28px 32px;
  border: 1px solid #deded8;
  border-left: 0;
  border-radius: 18px;
  background: #ffffff;
  color: #222222;
  font-size: 17px;
  line-height: 1.9;
}

.osaka-modern-main .space {
  display: none;
}

.osaka-modern-service {
  margin: 0;
  padding: clamp(72px, 10vw, 112px) 0;
  background: #ffffff;
}

.osaka-modern-service > h2,
.osaka-modern-service .content-box h2 {
  color: #111111;
  font-size: clamp(24px, 3vw, 36px);
  font-weight: 560;
  line-height: 1.24;
  letter-spacing: -0.02em;
}

.osaka-modern-service .content,
.osaka-modern-service .content-box {
  width: min(1100px, calc(100% - 48px));
}

.osaka-modern-service .content {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(280px, 0.82fr);
  gap: clamp(32px, 5vw, 72px);
  align-items: center;
}

.osaka-modern-service .content-left,
.osaka-modern-service .content-right {
  width: auto;
  float: none;
}

.osaka-modern-service .text {
  display: grid;
  gap: 14px;
}

.osaka-modern-service .text p {
  margin: 0;
  padding: 18px 0;
  border-top: 1px solid #e7e7e1;
  color: #333333;
  font-size: 15px;
  line-height: 1.8;
}

.osaka-modern-service img {
  border-radius: 22px;
}

.osaka-modern-service .content-box {
  margin: clamp(70px, 9vw, 104px) auto 0;
  padding-top: clamp(42px, 6vw, 72px);
  border-top: 1px solid #e2e2dc;
}

.osaka-modern-service .content-box p {
  width: min(760px, 100%);
  color: #333333;
  font-size: 16px;
  line-height: 1.9;
}

.osaka-modern-page .sen {
  width: min(980px, calc(100% - 48px));
  margin: clamp(72px, 10vw, 110px) auto;
  padding: clamp(30px, 5vw, 52px);
  border: 1px solid #deded8;
  border-radius: 22px;
  background: #ffffff;
}

.osaka-modern-page .sen h2 {
  text-align: left;
  font-size: clamp(24px, 3vw, 34px);
  font-weight: 560;
  letter-spacing: -0.02em;
}

.osaka-modern-page .sen p {
  color: #333333;
  font-size: 15px;
  line-height: 1.9;
}

@media (max-width: 820px) {
  .osaka-modern-page .top-banner {
    min-height: 460px;
    padding: 76px 24px 42px;
  }

  .osaka-modern-main,
  .osaka-modern-service .content,
  .osaka-modern-service .content-box,
  .osaka-modern-page .sen {
    width: calc(100% - 32px);
  }

  .osaka-modern-main {
    margin: 64px auto;
  }

  .osaka-modern-main h2 {
    margin-top: 56px;
  }

  .osaka-modern-service .content {
    grid-template-columns: 1fr;
  }

  .osaka-modern-service .content-right {
    display: none;
  }
}