@charset "UTF-8";

/*!
Theme Name: Cocoon Child
Description: Cocoon専用の子テーマ
Theme URI: https://wp-cocoon.com/
Author: わいひら
Author URI: https://nelog.jp/
Template:   cocoon-master
Version:    1.1.3
*/

/************************************
** 子テーマ用のスタイルを書く
************************************/
/*必要ならばここにコードを書く*/

/*メイン、サイドの幅を調整*/
.wrap { width:960px;}
.main { width: 700px;}
.sidebar { width: 255px;}
.main, .sidebar, .sidebar-left .main, .sidebar-left .sidebar { margin: 0;}

.content { margin-top: 16px;}

/*固定ページの日付を消す*/
.page .date-tags {display: none;}
/*固定ページのh1*/
.entry-title, .archive-title { border-bottom: 1px solid #ccc; padding: 0 0 3px; margin: 0 0 1em;}
/*固定ページのh2のサブ*/
h2 .sub {font-size: 90%; display: block; text-align: right; margin: 5px 0 0;}

h2.alm {text-align: center; background-color: #6ed6d4; color: #fff; font-weight: normal;}
h3.alm {font-weight: normal;text-align: center; background-color: #6ed6d4; margin: 1em auto 0; width: 600px;color: #fff;}
h3.sejutsu {font-weight: normal; border-bottom: 1px solid #ccc; width: 100%; margin: 0 0 1em;}

.main_top { width: 960px; margin: 0 auto;}
.logo_wrap {width:960px;display:flex;justify-content:space-between;margin: 1em auto 0;align-items: flex-start;border-bottom: 1px solid #ccc;}
.logo_wrap img {width:400px;height:auto;max-width: 100%;margin: 15px 0 0;}
<!-- .logo_wrap .add_info {display: flex; flex-wrap: wrap; width: calc(100% - 500px);padding: 0;} -->
.logo_wrap .add_info {display: flex; flex-wrap: wrap; width: calc(100% - 500px);padding: 0 0 5px;}
.logo_wrap .add_info .info_l{width:5.5em;}
.logo_wrap .add_info .info_r{width: calc(100% - 6em);}
.logo_wrap .add_info .phone::before { content: ""; width: 1em; height: 1em; display: inline-block; background: url(https://alm-jp.com/home/wp-content/uploads/2021/08/tel_icon.png) no-repeat; background-size: contain; margin: 0px 4px 0 0; position: relative; top: 2px;}
.add_info .pc_no {display: none;}
.logo-text {display: none;}
.add_info .phone a { text-decoration: none; color: #333;}

.navi-in > ul {flex-wrap: nowrap;justify-content: space-between;}
.navi-in > ul li {width: auto;height: 50px;line-height: 50px;}
.navi-in a {padding: 0 1em;}

.photo_area_top{width:100%;display:flex;justify-content:space-between;align-items: start;margin: 0 0 1em;flex-wrap: wrap;}
.photo_area_top .about_photo { margin: 0 0 1em; font-size: 1.2em; line-height: 1.5; background-color: #f7f7cf; width: 100%; padding: 1em 2em; display: flex; justify-content: center;}
.photo_area_top .photo01 {width:38%;height: auto;}
.photo_area_top .photo02 {width:27.8%;height: auto;}
.photo_area_top .photo03 {width:33%;height: auto;}
.photo_area_top img {width:100%;height: auto;}
.photo_area_top .photo02 figcaption {position:relative;top: -2.5em; color: #000; text-align: right; font-size: 0.9em;}

p.summary_catch {text-align: center;font-size: 1.2em; margin: 1em 0 0; color: #0557d2;}
.summary {width: 83%; margin: 0.5em auto 0; border-top: 5px dotted #ccc; padding: 1em 0 0;}
.summary p {text-align: center; font-size: 1.5em; font-weight: bold; color: #fb3a00; line-height: 1.2;}
.summary .reserve {display:flex;margin: 1em 0 0;}
.summary .midashi {display: flex; width: 6em;align-items: center; border: 1px solid #ccc; border-radius: 10px;justify-content: center;}
.summary .day_time { flex: 1;margin: 0 0 0 1em;}
.summary .day_time table { margin: 0 !important;}
.summary .day_time table th,.summary .day_time table td {border: none;padding: 0 6px;}
.summary .day_time table tr:nth-of-type(2n+1) {background: none;}
.summary .day_time table tr td:first-child { width: 6em;}
.summary .day_time table tr td:nth-child(2) { width: 11em;}
.summary .day_time .sp_no{display:inline;}
.summary .day_time .pc_no{display:none;}
.summary td.phone::before { content: ""; width: 1em; height: 1em; display: inline-block; background: url(http://alm-jp.com/home/wp-content/uploads/2021/08/tel_icon.png) no-repeat; background-size: contain; margin: 0px 4px 0 0; position: relative; top: 2px;}
.summary td.phone a { text-decoration: none; color: inherit;}

.g_map {width:600px;margin:1em auto;}
.wpsbc-container {display: flex;justify-content: center;}
table.address_t {margin: 0;}
table.address_t td {padding: 0; background-color: #f4f5f7;}	
table.address_t td br {display: none;}

.about_wrap {margin: 2em auto; width: 100%; overflow: auto;}
.about_wrap .photo_area {width: 30%; float: left; margin: 0 1em 0 0;}
.about_wrap .photo_area img {width:100%;height:auto;}
.about_wrap .about {padding: 0 1em;}
.about .profile {float: right;margin: 1em 0 0;line-height: 1.5;}
.about .profile .pro_name { border-bottom: 1px dashed #ccc; display: block; margin: 0 0 5px;}

.nagare_wrap {justify-content:space-between;display:flex;margin: 2em auto 3em; width: 83%;}
.nagare_wrap .photo_area {width:30%;}
.nagare_wrap .photo_area img {width: 100%; height: auto; margin: 0 0 1.3em; display: block;}
.nagare_wrap .photo_area img:nth-child(3) { margin: 0 auto;}
.nagare_wrap .nagare {width:60%;}

.annai {width: 83%;margin:2em auto 3em}
.annai dt { font-size: 1em; line-height: 1.2; margin: 1em 0 0;}
.annai dd { padding: 0 0 0 1em; margin: 0.5em 0 0em;line-height: 1.5;}

.biwanoha {justify-content: space-between; margin: 2em auto;}
.biwanoha .kounou { margin: 1em 0 0;}
.biwanoha .kounou dd { margin: 0 0 10px 1em;}
.biwanoha .biwanoha_img img {width: 40%; float: right; margin: 0 0 0 10px;}

.ryokin {justify-content:space-between;display:flex;width: 100%;margin:2em auto 3em}
.ryokin table {width:50%;margin:0 auto;font-size:1.2em;}
.ryokin table th, table td {border: 0px;}
.ryokin table td {border-bottom:1px solid #ccc;background-color:#fff;}
.ryokin table td:first-child{text-align:left;}
.ryokin table td:last-child{text-align:right;}
.ryokin ul{font-size: 1em;}

.g_map .widget:nth-child(5) h3 { color: #fff; font-weight: normal; text-align: center; background-color: #6ed6d4; margin: 1em auto 0; width: 600px;}
.g_map .widget:nth-child(5) ul { padding: 1em; background: #e9ffe2; margin: 0 0 2em;}
.g_map .widget:nth-child(5) ul li { list-style-type: disclosure-closed; list-style: #ccc; margin: 0 0 0 1em;}

.info_blog { display: flex; justify-content: space-between;margin:2em 0;}
.info_blog h2 { margin: 0 0 0.5em;}
.info_blog .important_info { width: 49%;}
.info_blog .blog_area { width: 49%;}
.info_blog .blog_area h3 { margin: 0 0 0 0.5em;}
.info_blog .blog_area ul li {
background-image: url(https://alm-jp.com/home/wp-content/uploads/2023/05/kiji-icon.png);
background-repeat: no-repeat;
background-size: 1em;
background-position: left 6px;
padding: 0 0 0 1.5em;
list-style: none;
margin: 0 0 0 -1.5em;
}
.info_blog .important_info ul li {
background-image: url(https://alm-jp.com/home/wp-content/uploads/2024/05/info_icon.png);
background-repeat: no-repeat;
background-size: 1.3em;
background-position: left -1px;
padding: 0 0 0 1.7em;
list-style: none;
margin: 0 0 0 -2.5em;
line-height: 1.3;
}

/* トップページのメニュー */
.alm_menu_wrap {
    width: 100%;
    margin: 0 auto 2em;
    display: flex;
    justify-content: space-between;
    flex-wrap: wrap;
}
a.alm_menu {
    width: 23%;
    text-align: center;
    display: flex;
    justify-content: center;
    align-items: center;
    height: 6em;
    border: 1px solid #ccc;
    text-decoration: none;
    font-size: 1.5em;
    margin: 0 0 1em;
    box-shadow: 6px 6px 10px 0px rgba(0, 0, 0, 0.4);
    color: #555;
	line-height: 1.3;
}
a.alm_menu:hover {
    opacity: 0.5;
}

/* 電車の案内 */
a.train_info { width: 16em; margin: 1em auto 0em; background-color: #5192fd; text-align: center; padding: 0.3em 0; border-radius: 0.5em; color: #fff; font-size: 0.8em; display: block; text-decoration: none;}
a.train_info:hover {opacity:0.5;}

/* 予約はネットから */
a.net_yoyaku {
    width: 100%;
    background-color: #ff4714;
    text-align: center;
    color: #fff;
    text-decoration: none;
    padding: 2px;
    border-radius: 10px;
}


/* トップページ光るボタン */
.s-btn {
width: 100%;
}

.s-btn a {
    display: block;
    width: 100%;
    background: #ff4714;
    text-align: center;
    padding: 2px;
    color: #ffffff;
    text-decoration: none;
    border-radius: 10px;
    -webkit-border-radius: 10px;
    -moz-border-radius: 10px;
    box-sizing: border-box;
    position: relative;
    overflow: hidden;
}

.s-btn a::before {
    content: '';
    height: 100%;
    width: 30px;
    position: absolute;
    top: -180px;
    left: 0;
    background-color: #fff;
    opacity: 0;
    animation: s-btn 5s ease-in-out infinite;
	animation-delay: -1s;
    display: inline-block;
}

.s-btn a:hover {
    opacity: 0.5;
}

@-webkit-keyframes s-btn {
    0% { -webkit-transform: scale(0) rotate(45deg); opacity: 0; }
    80% { -webkit-transform: scale(0) rotate(45deg); opacity: 0.5; }
    81% { -webkit-transform: scale(4) rotate(45deg); opacity: 1; }
    100% { -webkit-transform: scale(50) rotate(45deg); opacity: 0; }
}


/************************************
** レスポンシブデザイン用のメディアクエリ
************************************/

/*1023px以下*/
@media screen and (max-width: 1023px){
  /*必要ならばここにコードを書く*/
.logo_wrap { width: 100%;}
.wrap { width: 100%;}
	
/*959px以下*/
@media screen and (max-width: 959px){
  /*必要ならばここにコードを書く*/
.main_top {width:100%;}
p.summary_catch {font-size: 1em;}
.navi-in a { padding: 0 0.5em;}
}
	
/*834px以下*/
@media screen and (max-width: 834px){
.content { margin-top: 0px;}
}

/*767px以下*/
@media screen and (max-width: 767px){
  /*必要ならばここにコードを書く*/

	/*固定ページのh2のサブ*/
h2 .sub {text-align: left;}

h3.alm {font-weight: normal;text-align: center; background-color: #6ed6d4; margin: 1em auto 0; width: 100%;color: #fff;}
.g_map .widget:nth-child(5) h3 {font-weight: normal;text-align: center; background-color: #6ed6d4; margin: 1em auto 0; width: 100%;color: #fff;}
	
.logo_wrap {width:90%;margin: 1em auto 0;align-items: center;flex-direction: column; padding: 0 0 10px;border-bottom: 0px;}
.logo_wrap .add_info { width: 100%;border-top: 8px dotted #6ed6d4;}
.add_info .pc_no {display: block; text-align: right; width: 100%;}
.add_info .phone a { color: #1967d2;}
	
.photo_area_top {justify-content: center;}
.photo_area_top .photo01{ width: 95%; height: auto; margin: 0 auto;}
.photo_area_top .photo02 { width: 43.5%; height: auto; margin: 0;}
.photo_area_top .photo03 { width: 51.5%; height: auto; margin: 0;}
.photo_area_top .photo02 figcaption { margin: 0 0 -1.8em;font-size: 0.7em;}

p.summary_catch {width: 90%;font-size: 1em;margin: 1em auto 0;text-align: left;}
.summary .line_mt { margin: 0.5em 0 0; display: inline-block;}
.summary .reserve {	flex-direction: column;}
.summary .midashi {	width: 100%;}
.summary .day_time {margin: 0;}	
.summary .day_time table th, .summary .day_time table td {display: block;font-size: 1em;text-align: center;line-height: 1.2; padding: 0.5em 0;}
.summary .day_time table td:nth-child(2) {background-color: #eaac66;width: 90%;margin: 0 auto;color: #fff;}	
.summary .day_time table tr td:first-child { width: 100%;}
.summary .day_time table tr td:nth-child(2) { width: 90%;}
.summary .day_time .sp_no{display:none;}
.summary .day_time .pc_no{display:inline;}

.g_map {width:100%;margin:1em auto 0; padding: 0 5px}
table.address_t td br {display: inline;}
table.address_t td {font-size: 1em; vertical-align: top;}
	
.about_wrap {flex-direction: column-reverse;margin: 1em auto 2em;width: 90%;overflow: inherit;}
.about_wrap .about {width: 100%;margin: 0 0 2em;}
.about_wrap .photo_area {width: 100%;}
.about_wrap .photo_area img {width: 80%; height: auto; margin: 0 auto 1em; display: block;}
.about_wrap .about {padding: 0 0em;}
.about .profile {float: none;margin: 2em 0 0;}
	
.nagare_wrap  {flex-direction: column-reverse;margin: 1em auto 2em;width: 90%;}
.nagare_wrap .nagare {width: 100%;margin: 0 0 2em;}
.nagare_wrap .photo_area {width: 100%;}
.nagare ol {padding: 0 0 0 30px;}
.nagare_wrap .photo_area img { width: 80%; height: auto; margin: 0 auto 0.5em; display: block;}

.annai {width: 90%; margin: 1em auto 2em;}

.biwanoha {margin: 1em auto 0em; width: 90%;}
.biwanoha .kounou dd { margin: 0 0 10px 1em;}
.biwanoha_img { display: flex; flex-direction: column;}
.biwanoha .biwanoha_img img {width: 100%; float: none; margin: 1em 0 0;}

.ryokin {width: 90%; margin: 1em auto 2em; flex-direction: column-reverse;}
.ryokin table {width: 100%;}
.ryokin ul {padding: 0 0 0 20px; margin: 0 0 1em;}

.footer-bottom {margin-top: -10px;writing-mode;}
.footer-bottom-logo img { height: auto; width: auto;}

.info_blog { margin: 1em 0 2em; flex-direction: column;}
.info_blog .important_info { width: 100%; margin: 0 0 3em;}
.info_blog .blog_area { width: 100%;}	

.alm_menu_wrap {width: 95%;margin: 0 auto;}
a.alm_menu { width: 48%; height: 4em; font-size: 1em;}

/* トップページ光るボタン */
.s-btn a {
    padding: 5px 0;
	margin:10px 0 0;
}	
	
}

/*480px以下*/
@media screen and (max-width: 480px){
  /*必要ならばここにコードを書く*/
}