@charset "UTF-8";
/* カスタマイズ用CSS */

* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
body {
font-family: 'Hiragino Sans', 'Yu Gothic', sans-serif;
line-height: 1.6;
font-size: 16px;
}
		
.page_content {
max-width: 1130px;
margin: 0 auto;
padding: 0 0;
}
		
@media (max-width: 1180px) {
.page_content {
padding: 0 16px;
}
}

.ec-pageHeader {
margin-top: 0;
padding-top: 0;
}

ol.ec-topicpath {
margin-top: 0;
padding-top: 0;
}
ol.ec-topicpath li {
margin-top: 0;
padding-top: 0;
}

.ec-pageHeader h1 {
margin-top: 0;
padding-top: 0;
  text-box-trim: trim-both;
}

.red {
color: #F00;
}

.ec-role {
  padding-left: 0;
  padding-right: 0;
  max-width: 1130px;
}		
@media (max-width: 1180px) {
.ec-role {
  padding-left: 0;
  padding-right: 0;
}
}
		
@media (max-width: 768px) {
.ec-role {
padding: 0 16px;
}
}


img {
max-width: 100% !important;
height: auto;
}

.imagecenter {
display: block;
margin: 0 auto;
max-width: 100%;
}
.imageleft {
display: block;
margin: 0;
max-width: 100%;
}


.ec-headerNavSP {
position: relative;
}
		
/* メインコンテンツ外枠の横幅固定を外す */

.ec-layoutRole .ec-layoutRole__contents{
max-width: 1130px;
}
.ec-productRole {
max-width: 1130px;
padding: 0;
margin: 0;
}

.ec-sliderItemRole {
padding-left: 0;
}
@media only screen and (max-width: 768px) {
.ec-productRole {
padding: 0 16px;
}
.ec-sliderItemRole {
padding: 0 0;
padding-left: 0;
}
}

/*  */
/*    max-width: none; */ /* 1130px; */
.ec-sliderRole {
max-width: 1130px;
padding-left: 0; /* 20px; */
padding-right: 0; /* 20px; */
margin-bottom: 32px;
}
.sp_only {
display: none;
}

@media only screen and (max-width: 768px) {
.ec-sliderRole{
margin-bottom: 24px;
}
.pc_only {
display: none;
}
.sp_only {
display: block;
}
}

.ec-layoutRole__contents {
margin-top: 20px;
}
.googlemap {
    position: relative;
    padding-bottom: 70%;
    height: 0;
    overflow: hidden;
	margin-bottom: 8px;
}

.googlemap iframe {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}

.main_visual {
margin-top: 20px;
}

/************************************
** ヘッダー
************************************/


ul.bt_headtop {
margin: 0;
padding: 0;
}
ul.bt_headtop li {
display: block;
margin: 0;
padding: 0;
line-height: 1.0;
}

ul.bt_headtop li img {
display: block;
margin: 0 auto;
padding: 0;
max-width: 100%;
height: auto;
}

ul.bt_headtop li a {
display: block;
padding: 0 0;
background-color: #61c871;
}
@media only screen and (max-width: 768px) {
ul.bt_headtop li a {
padding: 6px 4px;

}
}
ul.bt_headtop li:nth-child(1) a {
background-color: #F60;
}
ul.bt_headtop li:nth-child(2) a {
background-color: #61c871;
}

ul.bt_headtop li:nth-child(3) a {
background-color: #0066ff;
}


.ec-headerNaviRole {
max-width: 1130px;
padding: 4px 0;
}
@media only screen and (max-width: 768px) {
.ec-headerNaviRole {
	padding: 8px 16px;
}
}
.ec-headerNavSP {
  padding: 10px;
  width: 40px;
  height: 40px;
  font-size: 18px;
  top: 4px;
  left: 8px;
}
/************************************
** ヘッダー
************************************/

.ec-headerRole {
  padding: 8px 0;
  margin: 0 auto;
  font-size: 16px;
  line-height: 1.4;
}
.ec-headerRole__title {
display: flex;
flex-wrap: wrap;
align-items: flex-start;
justify-content: space-between;
margin: 0;
padding: 0;
}

@media only screen and (max-width: 1280px) {
.ec-headerRole__title {
margin: 0 16px;
}
}

.ec-headerTitle,
.header_right {
display: block;
width: calc(100% / 2 - 16px);
  padding: 0;
  margin: 0;
text-align: left;
}

.header_right {
max-width: 180px;
}

.ec-headerTitle {
display: block;
}

.ec-headerTitle__title a {
margin-bottom: 0 !important;
}

.ec-headerTitle__title {
display: block;
margin-bottom: 0;
padding: 0;
}

@media only screen and (max-width: 768px) {
.ec-headerTitle,
.header_right {
width: calc(100% / 2 - 48px);
}
}
@media only screen and (max-width: 768px) {
.ec-headerRole__title {
display: block;
margin: 0 auto;
}
.ec-headerTitle,
.header_right {
display: block;
width: auto;
  margin: 0 auto;
}
.header_right {
max-width: 340px;
font-size: 16px;
margin-top: 8px;
}
}

.headerTitle_flex {
display: flex;
justify-content: flex-start;
flex-wrap: wrap;
align-items: center;
}
.headerTitle_flex_logo {
display: inline-block;
}
.headerTitle_flex_txt {
display: inline-block;
margin-left: 8px;
}
@media only screen and (max-width: 1080px) {
.headerTitle_flex_txt {
  font-size: 1.48vw;
}
}

@media only screen and (max-width: 768px) {
.headerTitle_flex {
display: block;
justify-content: center;
flex-wrap: wrap;
flex-flow: column;
align-items: center;
}
.headerTitle_flex_logo {
display: block;
margin: 0 auto;
text-align: center;
}
.headerTitle_flex_txt {
display: block;
margin: 0 auto;
text-align: center;
margin-top: 4px;
margin-left: auto;
  font-size: 16px;
}
}




.ec-headerTitle {
display: block;
width: auto;
text-align: left;
height: auto!important;
min-height: inherit!important;
margin-bottom: 0 !important;
padding: 0;

padding-bottom: 0 !important;

}
.ec-headerTitle h1 {
display: block;
margin: 0;
height: auto!important;
min-height: inherit!important;
margin-bottom: 0 !important;
padding: 0;
padding-bottom: 0 !important;
max-width: 232px;
}
.ec-headerTitle h1 img {
display: block;
margin: 0;
padding: 0;
height: auto !important;
max-width: 100%;
}
.ec-headerTitle p {
text-align: left;
font-size: 90%;
}
@media only screen and (max-width: 768px) {
.ec-headerTitle h1 {
max-width: 400px;
}
.ec-headerTitle p {
font-size: 80%;
}
}

@media only screen and (max-width: 768px) {
.ec-headerTitle {
text-align: center;
width: auto;
padding: 0;
margin: 0 auto !important;
}

@media only screen and (max-width: 480px) {
.ec-headerTitle {
margin: 0 16px !important;
}
}

.ec-headerTitle h1 {
display: inline-block;
margin: 0 auto;
text-align: center;
}
.ec-headerTitle h1 img {
display: block;
margin: 0 auto !important;
width: 430px;
max-width: 80%;
}

.ec-headerTitle p {
text-align: center;
font-size: 80%;
margin-bottom: 8px;
}
}

ul.head_tel {
display: flex;
justify-content: space-between;
flex-wrap: wrap;
margin: 0;
padding: 0;
}

ul.head_tel li {
display: block;
width: calc(100% / 3 - 8px);
margin: 0;
padding: 0;
text-align: center;
font-size: 14px;
line-height: 1.2;
text-decoration: none;
}

ul.head_tel li .imagecnenter {
margin-bottom: 4px;
width: 60px;
}
ul.head_tel li i {
display: block;
margin: 0 auto;
margin-bottom: 4px;
color: #61c871;
font-size: 36px;
}

ul.head_tel li a {
display: block;
margin: 0;
padding: 0;
color: #000 !important;
text-decoration: none;
}

p.gray_temp {
margin-bottom: 0;
margin-top: 4px;
padding: 0;
text-align: left;
}

@media only screen and (max-width: 768px) {
ul.head_tel {
display: flex;
justify-content: center;
flex-wrap: wrap;
margin: 0;
padding: 0;
}

ul.head_tel li {
display: inherit;
width: auto;
margin: 0 8px;
font-size: 13px;
}

ul.head_tel li i {
margin-bottom: 4px;
font-size: 32px;

}

p.gray_temp {
font-size: 14px;
margin-bottom: 0;
margin-top: 8px;
padding: 0;
text-align: center;
}
}

.icon_mail {
display: inline-block;
background-image: url(../../../user_data/assets/img/icon/icon_mail_wh.png);
background-repeat: no-repeat;
background-position: 10px center;
background-size: 25px;
padding-left: 35px;

}
/************************************
** グローバルメニュー
************************************/

.nav_pc {
background-color: #203055;
color: #FFF;
}

.nav_pc .ec-itemNav__nav li a {
background: #203055;
color: #FFF;
}
.nav_pc .ec-itemNav__nav li a:hover {
background: #3c4e7e;
color: #FFF;
}


@media only screen and (max-width: 1080px) {
.nav_pc .ec-itemNav__nav li a {
padding: 18px 8px;
  font-size: 1.48vw;
}
}

/************************************
** フッター
************************************/

.ec-footerRole {
background-color: #F5F5F5;
border-top: none;
color: #000;
}

.ec-footerRole__inner,
.ec-footerTitle,
.ec-footerTitle__logo {
color: #000;
}
.ec-footerRole a:link,
.ec-footerNavi {
color: #000;
text-decoration: none;
}
.ec-footerTitle__logo img {
width: auto !important;
height: 68px;
}
.ec-footerTitle__logo {
padding: 0;
margin: 0 auto;
}

.ec-footerRole a:hover,
.ec-footerNavi a:hover {
color: #000;
text-decoration: underline;
}

.ec-footerTitle__copyright {
background-color: #1f2f54;
color: #FFF;
padding: 16px;
text-align: center;
}

/************************************
** サイドバー
************************************/

.side_bn {
    display: grid;
    grid-template-columns: repeat(12, 1fr);
    gap: 8px;
}
.side_bnbox {
    grid-column: span 12 / span 12;
}

.ec-calendar table{
table-layout: fixed;
width: 100%;
margin-bottom: 8px;
}
.ec-calendar table th,
.ec-calendar table td {
padding: 4px;
}


/************************************
** 
************************************/


.ec-layoutRole .ec-layoutRole__contents {
    margin-right: auto;
    margin-left: auto;
    width: 100%;
    max-width: 1130px;
    display: block;
    flex-wrap: nowrap;
}

.ec-layoutRole__mainWithColumn {
	float: right;
}

.ec-layoutRole__right {
	float: left;
}
.ec-layoutRole .ec-layoutRole__left,
.ec-layoutRole .ec-layoutRole__right {
display: block;
width: 23%;
}
@media only screen and (max-width: 768px) {
.ec-layoutRole .ec-layoutRole__left,
.ec-layoutRole .ec-layoutRole__right {
    display: block;
}

.ec-layoutRole .ec-layoutRole__right {
	clear: both;
	float: none;
	display: block;
	max-width: inherit;
	min-width: inherit;
	width: auto !important;
	margin: 0 15px;
}
}


/************************************
** 
************************************/
@media only screen and (max-width: 768px) {
.caegory_nav {
	display: none;
}
}

ul.pc_caegory_nav {
	margin: 0;
	padding: 0;
	margin-bottom: 24px;
}
ul.pc_caegory_nav li {
	display: block;
	list-style: none;
	margin: 0;
	padding: 0;
	text-align: left;
	max-width: none;
	font-size: 110%;
}

ul.pc_caegory_nav li a {
	display: block;
	margin: 0;
	font-weight: bold;
	border-left: 5px solid #203055;
	background-color: #FFF;
	padding: 10px;
	color: #000;
}
ul.pc_caegory_nav ul {
	margin: 0;
	padding: 0;
}
ul.pc_caegory_nav ul li {
	margin: 0;
	padding: 0;
	border-bottom: 1px dotted #CCC;
}
ul.pc_caegory_nav ul li ul {
	display: none;
}

ul.pc_caegory_nav li ul li a {
	font-weight: normal;
	font-size: 14px;
	background-image: none !important;
	border-left: none;
	padding-left: 10px !important;
	background-color: #FFF;
}
ul.pc_caegory_nav li ul li a:before {
	content: "▶";
	color: #203055;
	font-size: 10px;
}
ul.pc_caegory_nav li ul li ul li a {
	font-weight: normal;
}
ul.pc_caegory_nav li ul li ul li a:before {
	content: "";
}
ul.pc_caegory_nav li a:hover {
	text-decoration: none;
    -webkit-transition: all 0.3s;
    -moz-transition: all 0.3s;
    transition: all 0.3s;
    opacity: 0.8;
}

ul.pc_caegory_nav li ul li a:hover {
	background-color: #DFE;
}


/************************************
** 送料について
************************************/


/* パソコンではタイル型で表示 */
.slide-wrap {
  display: flex;
  margin: 0 auto;
  width: 100%;
}
p.slide-wrap_txt {
display: none;
}
@media only screen and (max-width: 768px) {
/* スマホではスライダーで表示 */
.slide-wrap {
	overflow-x: scroll;
	-webkit-overflow-scrolling: touch;
	overflow-scrolling: touch;
	margin-bottom: 8px;
}
.slide-wrap table {
	min-width: 830px;
	margin-bottom: 4px;
}

p.slide-wrap_txt {
display: block;
font-size: 14px;
margin-bottom: 16px;
}
p.slide-wrap_txt i {
color: #6C9;
margin-right: 2px;
font-weight: 900;
}
}



table.table_shippinglist {
width: 100%;
table-layout: fixed;
border: 2px solid #999;
margin: 0;
padding: 0;
margin-bottom: 20px;
}

table.table_shippinglist th {
border: 1px solid #999;
padding: 5px;
background-color: #DFE;
text-align: center;
}
table.table_shippinglist td {
border: 1px solid #999;
padding: 5px;
text-align: center;
}
/************************************
** FAQ
************************************/

 #faq details {
  border:1px solid #CCC;
  border-radius:12px;
  padding:14px 18px;
  background:#fff
  }
 #faq summary{
  cursor:pointer;
  font-weight:700
  }

/************************************
** トップお知らせ
************************************/
.ec-inlineBtn--top {
margin-top: 16px;
}
 .ec-newsRole .ec-newsRole__news {
padding: 0 !important;
border: none !important;
margin-top: 16px;
margin-bottom: 16px;
}
/************************************
** オフィス合鍵サービス
************************************/
.price-highlight {
background-color: #ffeaa7;
padding: 15px;
border-left: 4px solid #fdcb6e;
margin: 0 0;
border-radius: 8px;
font-weight: bold;
}
        

        
.section-title {
font-size: 1.8em;
color: #2d3436;
margin-bottom: 30px;
text-align: center;
position: relative;
}
        
.section-title::after {
content: '';
display: block;
width: 80px;
height: 3px;
background: linear-gradient(90deg, #667eea, #764ba2);
margin: 10px auto;
border-radius: 2px;
        }


        
.info-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(350px, 1fr));
gap: 25px;
margin: 0 0;
        }
        
.info-card {
background: white;
padding: 25px;
border-radius: 12px;
box-shadow: 0 5px 20px rgba(0,0,0,0.1);
border-left: 4px solid #667eea;
}
        
      
        
        .info-card h3 {
            color: #2d3436;
            margin-bottom: 15px;
            font-size: 1.2em;
            display: flex;
            align-items: center;
        }
        
        .info-card h3::before {
            content: '📝';
            margin-right: 10px;
            font-size: 1.3em;
        }
        
        .key-image {
            width: 100%;
            max-width: 400px;
            height: auto;
            border-radius: 8px;
            box-shadow: 0 4px 15px rgba(0,0,0,0.15);
            margin: 15px 0;
        }
        
        .download-section {
            background: linear-gradient(135deg, #00cec9 0%, #55a3ff 100%);
            color: white;
            padding: 30px;
            border-radius: 12px;
            text-align: center;
            margin: 40px 0;
			margin-bottom: 0;
            box-shadow: 0 8px 30px rgba(0,0,0,0.15);
        }
        
        .download-section p {
            font-size: 1.1em;
            margin-bottom: 20px;
        }
        
        .download-btn {
            display: inline-block;
            background: white;
            color: #00cec9;
            padding: 12px 30px;
            border-radius: 25px;
            text-decoration: none;
            font-weight: bold;
            transition: all 0.3s ease;
            box-shadow: 0 4px 15px rgba(0,0,0,0.1);
        }
        
        .download-btn:hover {
            transform: translateY(-2px);
            box-shadow: 0 6px 20px rgba(0,0,0,0.15);
        }
        
        .alert {
            background: #fff3cd;
            border: 1px solid #ffeeba;
            border-radius: 8px;
            padding: 15px;
            margin: 15px 0;
            border-left: 4px solid #ffc107;
        }
        
        .alert strong {
            color: #856404;
        }
        
.grid_step {
    display: grid;
    grid-template-columns: repeat(12, 1fr);
    gap: 24px;
}      
.grid_stepbox {
    grid-column: span 4 / span 4;
}

@media (max-width: 768px) {
.grid_step {
    display: grid;
    grid-template-columns: repeat(12, 1fr);
    gap: 16px;
}  
.grid_stepbox {
padding: 15px;
grid-column: span 12 / span 12;
            }
            
            .header h1 {
                font-size: 2em;
            }
            
            .timeline {
                grid-template-columns: 1fr;
                gap: 15px;
            }
            
            .timeline-content {
                padding: 20px;
            }
            
            .info-grid {
                grid-template-columns: 1fr;
            }
        }
        
        @media (max-width: 1024px) and (min-width: 769px) {
            .timeline {
                grid-template-columns: repeat(2, 1fr);
            }
        }

    
     


.step-badge {
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
color: white;
padding: 12px 24px;
border-radius: 25px;
font-weight: 600;
font-size: 14px;
text-align: center;
margin-bottom: 20px;
box-shadow: 0 4px 15px rgba(102, 126, 234, 0.3);
letter-spacing: 0.5px;
width: 50%;
}

.content-card {
display: flex;
height: calc(100% - 60px);
flex-flow: column;
background: white;
border-radius: 12px;
padding: 25px 25px;
box-shadow: 0 2px 20px rgba(0, 0, 0, 0.08);
border: 1px solid #e9ecef;
}
		
        @media (max-width: 768px) {
		 .content-card {
		display: block;
		width: 100%;
		height: auto;
        }
		}

        .title {
            font-size: 18px;
            font-weight: 600;
            color: #2c3e50;
            margin-bottom: 15px;
            text-align: center;
        }

        .description {
            font-size: 14px;
            color: #666;
            text-align: left;
            line-height: 1.8;
        }

        /* Responsive design */
        @media (max-width: 480px) {
            .grid_stepbox {
                max-width: 100%;
                padding: 0 10px;
            }
            
            .content-card {
                padding: 25px 20px;
            }
            
            .step-badge {
                padding: 10px 20px;
            }
        }

/************************************
** トップページリスト
************************************/

.ec-newItemRole,
.ec-newsRole {
padding: 0;
margin: 0;
margin-bottom: 40px;
}
@media (max-width: 768px) {
.ec-newItemRole,
.ec-newsRole {
padding: 0;
margin: 0;
margin-bottom: 32px;
}
}

.grid_top_list {
    display: grid;
    grid-template-columns: repeat(12, 1fr);
    gap: 24px;
}
.grid_top_listbox {
    grid-column: span 3 / span 3;
}
.grid_top_listbox a {
color: #000;
}
@media (max-width: 768px) {
.grid_top_list {
    display: grid;
    grid-template-columns: repeat(12, 1fr);
    gap: 16px;
}
.grid_top_listbox {
    grid-column: span 6 / span 6;
}
}

.top_list_pic {
position: relative;
display: block;
  width: 100%;
  height: 0;
  padding-bottom: 133%;
  overflow: hidden;
  background-color: #F5F5F5;
}

.top_list_pic img {
margin: 0;
padding: 0;
position: absolute;
	top: 50%;
	left: 50%;
	transform: translateY(-50%) translateX(-50%);
display: block;
width: 100%;
height: 100%;
object-fit: contain;
}

.ec-newItemRole__listItemTitle,
.ec-newItemRole__listItemPrice {
  text-box-trim: trim-both;
}

.price02-zaiko {
	display: block;
	margin: 5px 0;
	text-align: center;
	background-color: #F5F5F5;
	padding: 5px !important;

}


.grid_shouhin_thumb {
    display: grid;
    grid-template-columns: repeat(12, 1fr);
    gap: 16px;
}
    
.grid_shouhin_thumbbox {
    grid-column: span 4 / span 4;
  opacity: 0.8;
  cursor: pointer;
}

.grid_shouhin_thumbbox:focus {
  outline: none;
}
.grid_shouhin_thumbbox:hover {
  opacity: 1;
}
.grid_shouhin_thumbbox img {
max-width: 100%;
width: 100%;
  height: auto;
  -o-object-fit: cover;
     object-fit: cover;
}



/************************************
** 商品詳細
************************************/
.ec-productRole__btn.red {
background-color: #F00 !important;
color: #FFF !important;
}
.ec-productRole__description table{
	table-layout: fixed;
	width: 100%;
}
.ec-productRole__description table tr, .ec-productRole__description table th, .ec-productRole__description table td {
	margin: 0;
	padding: 0;
}

.ec-productRole__description table th, .ec-productRole__description table td {
	padding: 10px;
	border: 1px solid #999;
}
.ec-productRole__description table th {
	width: 20%;
	background-color: none;
}


.item_nav_grid {
    display: grid;
    grid-template-columns: repeat(12, 1fr);
    gap: 24px;
}
.item_nav_grid_thumb {
position: relative;
    grid-column: span 3 / span 3;
	height: 0;
	padding-bottom: 133%;
	overflow: hidden;
}
.item_nav_grid_thumb img {
margin: 0;
padding: 0;
position: absolute;
	top: 50%;
	left: 50%;
	transform: translateY(-50%) translateX(-50%);
display: block;
width: 100%;
height: 100%;
object-fit: cover;
}
@media only screen and (max-width: 768px) {
.item_nav_grid {
    display: none;
}
}


/************************************
** ご購入の際は必ずお読みください。
************************************/
dl.list_joutai {
	margin: 0;
	padding: 0;
	background-color: #DFE;
	border: 1px dotted #CCC;
}
dl.list_joutai dt {
	clear: both;
	float: left;
	width: 150px;
	margin: 0;
	padding: 10px;
	font-weight: bold;
	border-top: 1px dotted #CCC;
}
dl.list_joutai dd {
	margin: 0;
	margin-left: 150px;
	padding: 10px;
	background-color: #FFF;
	border-top: 1px dotted #CCC;
}


table.list_joutai {
margin: 0;
padding: 0;
border: 1px solid #CCC;
table-layout: fixed;
width: 100%;
}
table.list_joutai tr {
margin: 0;
padding: 0;
border: none;
background: none;
}

table.list_joutai th {
margin: 0;
padding: 10px;
width: 150px;
background-color: #203055;
color: #FFF;
border-top: 1px solid #FFF;
	font-weight: bold;
border-bottom: 1px solid #FFF;
}
table.list_joutai td {
margin: 0;
padding: 10px;
border-top: 1px solid #CCC;
border-bottom: 1px solid #CCC;
}


@media only screen and (max-width: 768px) {


dl.list_joutai {
	border-bottom: none;
	background: none;
}
dl.list_joutai dt {
	float: none;
	width: auto;
	padding: 3px;
	min-width: inherit;
	text-align: center;
	display: block;
	background-color: #203055;
	color: #FFF;
	border-top: none;
}
dl.list_joutai dd {
	margin: 0;
	margin-bottom: 10px;
	border-top: none;
}
}



ul.list_maru {
	margin: 0;
	padding: 0;
}
ul.list_maru li {
	margin: 0;
	margin-left: 1.2em;
	padding: 0;
}

.box_gray {
	display: block;
	background-color: #F5F5F5;
	padding: 16px 16px;
	box-shadow: 0 0 5px rgba(0,0,0,0.5);
	border-radius: 5px;

}



/********* grid*************************************************/

.cc_grid_half_cont {
display: grid;
grid-template-columns: repeat(12, 1fr);
gap: 40px;
}

.cc_grid_half {
display: grid;
grid-template-columns: repeat(12, 1fr);
gap: 24px;
}
.cc_grid_txt {
grid-column: span 6 / span 6;
}
.cc_grid_pic {
grid-column: span 6 / span 6;
    grid-column-start: 7;
}
.cc_grid_helfbox {
grid-column: span 6 / span 6;
}
.cc_grid_helfbox_only {
grid-column: span 6 / span 6;
}
.cc_grid_helf01 {
grid-column: span 6 / span 6;
}
.cc_grid_helf02 {
grid-column: span 6 / span 6;
    grid-column-start: 7;
}

@media screen and (max-width: 640px){
.cc_grid_half_cont {
display: grid;
grid-template-columns: repeat(12, 1fr);
    grid-template-rows: auto;
gap: 32px;
}

.cc_grid_half {
display: grid;
    grid-template-columns: repeat(12, 1fr);
    grid-template-rows: auto;
    gap: 16px;
}
.cc_grid_half.shikaku {
display: grid;
    grid-template-columns: repeat(12, 1fr);
    grid-template-rows: auto;
    gap: 0 16px;
	margin-bottom: 16px;
}
.cc_grid_txt {
    grid-column: span 12 / span 12;
    grid-column-start: 1;
    grid-row-start: 2;
}
.cc_grid_pic {
    grid-column: span 12 / span 12;
    grid-column-start: 1;
    grid-row-start: 1;
}

.cc_grid_helfbox {
    grid-column: span 12 / span 12;
}
.cc_grid_helf01 {
    grid-column: span 12 / span 12;
    grid-column-start: 1;
    grid-row-start: 1;
}
.cc_grid_helf02 {
    grid-column: span 12 / span 12;
    grid-column-start: 1;
    grid-row-start: 2;
}
}

.cc_grid_txt h4 {
  text-box-trim: trim-start;
}


.header {
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
color: white;
padding: 20px 0;
text-align: center;
margin-bottom: 40px;
border-radius: 12px;
box-shadow: 0 8px 30px rgba(0,0,0,0.12);
}

.header h1 {
font-size: 2.5em;
font-weight: bold;
margin-bottom: 20px;
text-shadow: 2px 2px 4px rgba(0,0,0,0.3);
}

 @media (max-width: 768px) {
.header h1 {
font-size: 2em;
}
}
.header-description {
font-size: 1.1em;
opacity: 0.95;
max-width: 600px;
margin: 0 auto;
}

        
.section-title {
font-size: 1.8em;
color: #2d3436;
margin-bottom: 30px;
text-align: center;
position: relative;
}

.section-title::after {
content: '';
display: block;
width: 80px;
height: 3px;
background: linear-gradient(90deg, #667eea, #764ba2);
margin: 10px auto;
border-radius: 2px;
}

.side_title {
font-weight: bold;
padding: 15px;
background-color: #777;
color: #FFF;
border-left: 10px #555 solid;
margin-top: 0;
margin-bottom: 10px;
}
.side_title02 {
font-weight: bold;
padding: 10px;
background-color: #FFF;
color: #000;
border-left: 5px solid #203055;
border-bottom: 1px solid #203055;
margin-top: 0;
margin-bottom: 10px;
}

.bt_sidecontact {
display: block;
margin: 0 16px;
text-align: center;
}

.bt_sidecontact a {
display: block;
padding: 4px 8px;
background-color: #203055;
color: #FFF;
text-decoration: none;
border-radius: 3px;

}


/************************************
** テキスト位置
************************************/
.t_center {
  text-align: center !important;
}
.t_center_pc {
  text-align: center !important;
}
@media only screen and (max-width: 768px) {
  .t_center_pc {
    text-align: left !important;
  }
  .t_center_sp {
    text-align: center !important;
  }
}
.t_left {
  text-align: left !important;
}
.t_right {
  text-align: right !important;
}

.right {
  float: right !important;
}



/************************************
** padding
************************************/
.pb0 {
  margin-bottom: 0 !important;
}
.pb4 {
  padding-bottom: 4px !important;
}
.pb8 {
  padding-bottom: 8px !important;
}
.pb16 {
  padding-bottom: 16px !important;
}
.pb24 {
  padding-bottom: 24px !important;
}
.pb32 {
  padding-bottom: 32px !important;
}
.pb40 {
  padding-bottom: 40px !important;
  margin-bottom: 0 !important;
}
.pb80 {
  padding-bottom: 80px !important;
}
.pt0 {
  padding-top: 0 !important;
}
.pt4 {
  padding-top: 4px !important;
}
.pt8 {
  padding-top: 8px !important;
}
.pt16 {
  padding-top: 16px !important;
}
.pt24 {
  padding-top: 24px !important;
}
.pt32 {
  padding-top: 32px !important;
}
.pt40 {
  padding-top: 40px !important;
}
@media screen and (max-width: 768px) {
.pb4 {
  padding-bottom: 2px !important;
}
.pb8 {
  padding-bottom: 4px !important;
}
.pb16 {
  padding-bottom: 8px !important;
}
.pb24 {
  padding-bottom: 16px !important;
}
.pb32 {
  padding-bottom: 24px !important;
}
.pb40 {
  padding-bottom: 32px !important;
}
.pb80 {
  padding-bottom: 72px !important;
}
}

/************************************
** マージン
************************************/
.mb0 {
  margin-bottom: 0 !important;
}
.mb4 {
  margin-bottom: 4px !important;
}
.mb8 {
  margin-bottom: 8px !important;
}
.mb16 {
  margin-bottom: 16px !important;
}
.mb24 {
  margin-bottom: 24px !important;
}
.mb32 {
  margin-bottom: 32px !important;
}
.mb36 {
  margin-bottom: 36px !important;
}
.mb40 {
  margin-bottom: 40px !important;
}
.mb80 {
  margin-bottom: 80px !important;
}
.mt0 {
  margin-top: 0 !important;
}
.mt4 {
  margin-top: 4px !important;
}
.mt8 {
  margin-top: 8px !important;
}
.mt16 {
  margin-top: 16px !important;
}
.mt24 {
  margin-top: 24px !important;
}
.mt32 {
  margin-top: 32px !important;
}
.mt40 {
  margin-top: 40px !important;
}
@media screen and (max-width: 780px) {
.mb4 {
  margin-bottom: 2px !important;
}
.mb8 {
  margin-bottom: 4px !important;
}
.mb16 {
  margin-bottom: 8px !important;
}
.mb24 {
  margin-bottom: 16px !important;
}
.mb32 {
  margin-bottom: 24px !important;
}
.mb36 {
  margin-bottom: 28px !important;
}
.mb40 {
  margin-bottom: 32px !important;
}

.mb80 {
  margin-bottom: 72px !important;
}

.mt4 {
  margin-top: 4px !important;
}
.mt8 {
  margin-top: 2px !important;
}
.mt16 {
  margin-top: 16px !important;
}
.mt24 {
  margin-top: 16px !important;
}
.mt32 {
  margin-top: 24px !important;
}
.mt40 {
  margin-top: 32px !important;
}
}

/* カレンダー：休日セルを赤背景＋白文字 */
.ec-calendar__month tbody td.ec-calendar__holiday,
.ec-calendar__month tbody td.ec-calendar__holiday a {
  background: #e60033; /* 紅/朱系の赤 */
  color: #fff !important;
}
.ec-calendar__month tbody td.ec-calendar__holiday a {
  display: block;          /* セル全面を着色 */
  width: 100%;
  height: 100%;
  padding: .2em 0;
  border-radius: 4px;      /* 角丸はお好みで */
}

/* 今日が休日でも赤を優先（テーマによりクラス差があるので両対応） */
.ec-calendar__month tbody td.ec-calendar__holiday.ec-calendar__today,
.ec-calendar__month tbody td.ec-calendar__holiday.is-today {
  background: #e60033;
  color: #fff !important;
}


/* TOPページ上段の新規会員登録とログインを非表示 */
.ec-headerNav .ec-headerNav__item--entry,
.ec-headerNav .ec-headerNav__item--login {
    display: none !important;
}








/* styles.css */
:root{
  --ink:#1a1a1a;
  --muted:#666;
  --brand:#1e1b4b;        /* 濃紺（上部の帯） */
  --accent:#2f2a7a;       /* hover時など */
  --line:#e8e8ee;
  --bg:#ffffff;
  --wrap:1000px;          /* コンテンツ幅（画像に近い狭めの設定） */
}

*{ box-sizing:border-box; }
html,body{ height:100%; }
body{
  margin:0;
  color:var(--ink);
  background:var(--bg);
  font-family:"Noto Sans JP", system-ui, -apple-system, "Segoe UI", Roboto, "Hiragino Kaku Gothic ProN", "Yu Gothic UI", "Yu Gothic", "Meiryo", sans-serif;
  line-height:1.9;
  font-size:16px;
}

/* ラップ */
.wrap{
  max-width:var(--wrap);
  margin-inline:auto;
  padding-inline:20px;
}

/* パンくず風トップバー */
.topbar{
  background:var(--brand);
  height:28px;
  display:flex;
  align-items:center;
}
.crumbs{
  list-style:none;
  padding:0;
  margin:0;
  display:flex;
  gap:16px;
}
.crumbs a{
  display:inline-block;
  padding:4px 10px;
  color:#fff;
  text-decoration:none;
  font-size:13px;
  border-radius:2px;
  border:1px solid rgba(255,255,255,.2);
}
.crumbs a:hover{ background:rgba(255,255,255,.08); }

/* ヒーロー画像（ページ最上部の大きい写真） */
.hero02{
  background:#f3f3f7;
}
.hero02 img{
  display:block;
  width:min(1130px, 100%);
  margin:0 auto;
  height:auto;
}

/* タイトル */
.page-head{
  text-align:center;
  padding:28px 0 8px;
}
.page-head h1{
  font-size:22px;
  font-weight:700;
  letter-spacing:.02em;
  margin:6px 0 0;
}
.page-head .eyebrow{
  color:var(--muted);
  font-size:12px;
  margin:6px 0 16px;
}
.lead{
  margin:10px auto 26px;
}
.catch{
  margin:0;
  font-size:18px;
  font-weight:700;
}
.subcatch{
  margin:4px 0 0;
  font-size:16px;
  color:var(--muted);
}

/* セクション */
.section{
  padding:22px 0 18px;
  border-top:1px solid var(--line);
}
.section:first-of-type{ border-top:0; }
.section h2{
  font-size:16px;
  margin:0 0 14px;
  padding:8px 0;
  border-bottom:1px solid var(--line);
  font-weight:700;
}

/* 右に小画像のメディアレイアウト */
.media{
  display:grid;
  grid-template-columns: 1fr min(320px, 40%);
  gap:24px;
  align-items:start;
}
.media__thumb{
  margin:0;
}
.media__thumb img{
  width:100%;
  height:auto;
  display:block;
  border:1px solid var(--line);
  border-radius:2px;
  box-shadow:0 2px 8px rgba(0,0,0,.05);
}
.media__body p{ margin:0 0 1em; }



/* レスポンシブ */
@media (max-width: 800px){
  :root{ --wrap: 720px; }
  .media{
    grid-template-columns: 1fr;
  }
  .media__thumb{ order:-1; }     /* 画像を上に */
}
@media (max-width: 480px){
  :root{ --wrap: 100%; }
  .page-head h1{ font-size:20px; }
  .catch{ font-size:17px; }
  .subcatch{ font-size:15px; }
}

.content-wrapper {
  max-width: 1200px;   /* コンテンツ幅の上限 */
  margin: 0 auto;      /* 中央寄せ */
  padding: 0 20px;     /* 左右に余白を確保して端にくっつかないようにする */
  box-sizing: border-box;
}