@charset "UTF-8";

@media (max-width : 768px ){

    .pc { display: none !important; }
    .sp { display: block !important; }

	img {
		width: 100%;
		height: auto;
		}
	
	/* h tag */
    
    #title_h1 {
        text-align: center;
        font-size: 1.25em;
        padding: 15px 0px 15px 0px;
        background-color: #f8f8f8;
    }

    .title_h2 {
        text-align: center;
        padding: 20px 0px;
    }

    .title_h2 span {
        line-height: 1.5em;
        font-size: 1em;
        padding: 0 0 5px 0;
    }

    .box_h2 span {
        line-height: 1.5em;
        font-size: 1.25em;
        letter-spacing:0.1em;
        border-bottom: 2px solid #000000;
    }

    .box_h2 p {
        font-size: 0.7em;
    }

    #onecolumn_page h3 {
        font-size: 1em;
        padding: 30px 0 15px 0;
    }

    #onecolumn_page h3 span {
      border-bottom: 2px solid #339933;
    }

    #abut_3tx_bg h3 {
      color: #fff;
    }

    #abut_3tx_bg h3 span{
      border-bottom: 2px solid #fff;
    }
	
	/* header */

    #header_pc {
        display: none;
    }

    #header_sp {
        display: block;
        position:fixed;
        width:100%;
        height:80px;
        top:0;
        left:0;
        background:#FFF;
        z-index:100;
        border-top: 5px solid #339933;
    }
    
    #logo_sp {
        width: 150px;
        margin: 0 auto;
    }

    .spmenu_btn {
        display:block;
        position:absolute;
        top:14px;
        right:15px;
        width:30px;
        height:22px;
        background:#1b1b1b;
        border-top:10px solid #fff;
        border-bottom:10px solid #fff;
        -moz-box-sizing:border-box;
        -webkit-box-sizing:border-box;
        box-sizing:border-box;
        -moz-transition:all 0.3s;
        -webkit-transition:all 0.3s;
        transition:all 0.3s;
    }
    .spmenu_btn:before {
        content:'';
        position:absolute;
        width:30px;
        height:2px;
        background:#1b1b1b;
        top:-9px;
        right:0;
        -moz-transition:all 0.3s;
        -webkit-transition:all 0.3s;
        transition:all 0.3s;
    }
    .spmenu_btn:after {
        content:'';
        position:absolute;
        width:30px;
        height:2px;
        background:#1b1b1b;
        bottom:-9px;
        right:0;
        -moz-transition:all 0.3s;
        -webkit-transition:all 0.3s;
        transition:all 0.3s;
    }
    .spmenu_btn.active {
        background:#FFF;
    }
    .spmenu_btn.active:before {
        -moz-transform:rotate(-135deg);
        -webkit-transform:rotate(-135deg);
        transform:rotate(-135deg);
        top:0;
        right:0;
    }
    .spmenu_btn.active:after {
        -moz-transform:rotate(135deg);
        -webkit-transform:rotate(135deg);
        transform:rotate(135deg);
        bottom:0;
        right:0;
    }
     
    .spmenu {
        display:none;
        position:absolute;
        top:80px;
        left:0;
        width:100%;
        background:#339933;
    }
    nav {
        display:block;
        width:100%;
        margin:0 auto;
    }
    nav li a {
        display:block;
        font-size: 14px;
        width:100%;
        line-height: 1em;
        color:#FFF;
        padding:15px 10px;
        -webkit-box-sizing:border-box;
        box-sizing:border-box;
        position:relative;
        border-bottom:1px solid #66cc66;
    }
    nav li a:hover{
        color: #ccc;
    }

    nav li a span{
        font-size: 8px;
    }

	/* common */
    
    .pd_80 {
        padding: 80px 0 0 0;
    }
    
    .btn a {
        font-size: 12px;
        width: 240px;
        margin: 10px auto 0px auto;
    }
    
    #onecolumn_page {
        padding: 85px 0px 20px 0px;
    }
    
    #single_page {
        width: 100%;
    }

    #main_left {
        width: 90%;
        float: none;
        padding: 0px 0px 0px 0px;
        margin: 0% 5% 0% 5%;
    }
    
	.width960 {
		width: 90%;
	}

	#main {
		width: 90%;
        margin: 20px auto 0 auto ;
	}
    
    #date {
        font-size: 0.8em;
        padding: 10px;
        margin:10px 0px 10px 0px;
    }

    #cate {
        font-size: 0.75em;
        letter-spacing:0.15em;
        padding: 15px 0;
    }

	#single,#page {
		padding: 0 0 0 0;
	}

	#next{
		font-size: 0.6em;
		letter-spacing:0.15em;
		padding: 0px 0px 20px 0px;
	}

	#next div a {
		padding: 10px 10px;
	}
    
    /* single */
    
    #single h2 {
        font-size: 1.3em;
    }

	/* archive */

	#archives_box {
		width: 100%;
		padding: 0px 0px 0px 0px;
	}

	#archives_box_sl {
		width: 100%;
		margin:0;
		overflow: hidden;
		_zoom: 1;
	}
	
	.archives_box_s {
		float: none;
		width: 100%;
		margin:0 auto;
		padding-right: 0%;
		padding-bottom:15px;
	}

    .archives_box_s a{
        color: #1b1b1b;
    }

    .archives_box_sum {
        padding-bottom: 5px;
    }

    .archives_box_time {
        padding-bottom: 5px;
    }

    .archives_box_title {
        padding-bottom: 5px;
    }

	/* top page */

    #top_nav_2 {
        padding: 20px 0 10px 0;
    }

    #top_nav_2 div{
        width: 100%;
        float: none;
        padding: 0 0 10px 0;
    }

    #top_nav_2 div:nth-child(even){
        float: left;
        padding: 0 0 10px 0;
    }

    #facebook_box {
      width: 95%;
      margin: 0 2.5%;
      padding: 20px 0;
    }
    
    #top_main_catch {
    background-repeat:no-repeat;
        background-size: 80%;
    background-position:center;
    }
    
    #top_main_catch p{
        padding: 20px 0;
        color: #339933;
        font-size: 0.8em;
        text-align: left;
        line-height: 1.75em;
    }
    
    #blog_box {
        padding: 0 0 20px 0;
    }

    #news_box {
        width: 100%;
        padding: 0px 0px 0px 0px;
    }

    .news_box_s {
        float: none;
        width: 100%;
        margin:0 auto;
        padding-right: 0%;
        padding-bottom:10px;
        margin-bottom:10px;
        border-bottom: 1px solid #ccc;
    }

    .news_box_sum {
        display: none;
    }

    .news_box_s:last-child {
        padding-right: 0;
        border-bottom: none;
    }

    .news_box_time {
        font-size: 0.6em;
        padding-bottom: 5px;
    }

    .news_box_title {
        font-size: 0.8em;
        padding-bottom: 5px;
    }
    
    #info_box {
        padding: 20px 0 ;
    }
    
    #top_map iframe{
        height: 200px;
    }
    
    #info_logo {
        width: 180px;
        padding: 10px 0;
    }
    
    #info_add {
        font-size: 0.8em;
        text-align: center;
        padding: 0 0 5px 0;
    }

    #info_txbox {
        font-size: 0.8em;
        width: 100%;
        text-align: center;
        padding: 5px 0;
        margin: 5px 0;
    }
    
    #cs_box {
        padding: 20px 0 ;
    }
    
    #cs_tx1 {
        font-size: 0.8em;
        font-weight: normal;
        text-align: center;
    }
    
    #cs_logo {
        width: 200px;
        margin: 0 auto;
        padding: 10px 0;
    }
    
    .page_title {
        background: #f4f4f4;
        padding: 10px 0px 10px 0px;
    }

    .page_title h1{
        font-size: 1.2em;
    }

    .page_title p{
        font-size: 0.6em;
    }

	/* footer */

	#copy {
        font-size: 0.5em;
		padding: 10px 10px 10px 10px;
	}

    /* sidebar */

    #side {
        width: 90%;
        float: none;
        padding: 0px 5% 20px 5%;
    }

    #side h3 {
        width: 100%;
    }

    .widget_recent_entries,.widget_archive,.widget_categories,.widget_calendar{
        padding: 0px 0px 15px 0px;
    }

    /*****************************
    *カレンダーに枠を付ける
    *****************************/

    #calendar_wrap {
        padding: 0px 0px 0px 0px;
    }

    #wp-calendar {
        border-collapse: collapse;
        border-top-width: 1px;
        border-right-width: 1px;
        border-top-style: solid;
        border-right-style: solid;
        border-top-color: #eee;
        border-right-color: #eee;
        width: 100%;
    }

    #wp-calendar caption {
        padding: 10px 0px 10px 0px;
    }

    #wp-calendar thead tr th {
        text-align: center;
        border-bottom-width: 1px;
        border-left-width: 1px;
        border-bottom-style: solid;
        border-left-style: solid;
        border-bottom-color: #eee;
        border-left-color: #eee;
    }

    /*土曜日のヘッダーセル*/
    #wp-calendar thead tr th:nth-child(6){
      background-color: #C0DDF9;
    }

    /*日曜日のヘッダーセル*/
    #wp-calendar thead tr th:nth-child(7){
      background-color: #F5D0D3;
    }

    #wp-calendar td {
        text-align: center;
        padding: 0px;
        border-bottom-width: 1px;
        border-left-width: 1px;
        border-bottom-style: solid;
        border-left-style: solid;
        border-bottom-color: #eee;
        border-left-color: #eee;

    }
    #wp-calendar caption {
        font-weight: bold;
        text-align: left;
    }
    #wp-calendar tbody tr #today {
        background-color: #eee;
    }

    /* about us */

    #abut_1tx_bg {
        background-size:cover;
        padding: 0 0 30px 0;
    }

    #abut_1tx {
        font-size: 0.8em;
      color: #339933;
      text-align: left;
        padding: 0 10px;
    }

    #abut_2tx_bg {
      padding: 0 0 20px 0;
    }

    #abut_2tx {
      width: 100%;
      margin: 0 auto;
    }

    #abut_2tx img{
      width: 100%;
    }

    #abut_3tx_bg {
      padding: 0 10px 20px 10px;
    }

    #abut_3tx {
      font-size: 0.8em;
      width: 100%;
    }

    /* about us */

    #schedule_img {
      width: 95%;
      padding: 10px 2.5%;
    }

    /* works */

    #works_img_box {
      padding: 15px 0 0 0 ;
    }

    #works_img_box div{
      width: 95%;
      margin: 0 auto;
      padding: 0 2.5% 15px 2.5%;
    }

    #works_tx {
      font-size: 0.8em;
      padding: 0 0 0 0;
    }

    /* floor map */

    .fm_bg {
      background-color: #ffffff;
      padding: 0 0 0 0;
    }

    #fm_tx1 {
      width: 95%;
      font-size: 0.8em;
      padding: 10px 0;
      margin: 15px auto;
      text-align: center;
      border: 1px solid #009933;
    }

    #fm_tx2 {
      width: 95%;
      font-size: 0.8em;
      margin: 15px auto;
      }

    #fm_map_img {
      width: 100%;
      margin: 15px auto;
    }

    .fm_box1 {
      width: 100%;
      margin: 0 auto;
      padding: 15px 0 0 0;
    }

    .fm_box1_s div{
      width: 100%;
      float: none;
      padding: 0 0 0 0;
    }

    .fm_box1_s div:nth-child(2){
      width: 100%;
      float: none;
      padding: 0 0 0 0;
    }

    .fm_box1_tx1 {
      padding: 10px 0 0 0;
      color: #009900;
      text-align: center;
      font-size: 1em;
    }

    .fm_box1_tx2 {
        width: 95%;
        margin: 0 auto;
      text-align: left;
      font-size: 0.8em;
      padding: 0 0 10px 0;
    }

    .fm_box2 {
      width: 100%;
      margin: 0 auto;
      padding: 15px 0 0 0;
    }

    .fm_box2_s {
      width: 100%;
      float: none;
      padding: 0 0 15px 0;
    }

    .fm_box2_s:nth-child(2){
      width: 100%;
      float: none;
    }

    .fm_box2_tx1 {
      padding: 10px 0 0 0;
      color: #009900;
      text-align: center;
      font-size: 1em;
    }

    .fm_box2_tx2 {
    width: 95%;
    margin: 0 auto;
    text-align: left;
    font-size: 0.8em;
    }

    .pd_bt_30 {
      padding: 0 0 0 0;
    }

/****************************************
            inquiry 
*****************************************/

    table#form_box span {
      font-size: 90%;
    }

    table#form_box {
      width: 100%;
      margin: 0 auto;
      font-size: 90% ;
      letter-spacing: 0.15em;
      line-height: 1.75em;

    }

    table#form_box tr {
      border-bottom: 1px solid #ECECEC;
  }

    table#form_box tr:last-child {
        border-bottom: none;
    }

    table#form_box th {
        display: block;
      width: 100%;
      text-align: left;
      vertical-align: middle;
      padding: 0 0 0 0;
    }

    table#form_box td {
        display: block;
        padding: 5px 0 10px 0 ;
    }

    table#form_box input {
      width: 300px;
      height: 25px;
    }

    table#form_box textarea {
      width: 100%;
      height: 100px;
    }

    #s_btn {
      width: 260px;
      height: 50px;
      background-color: #339933;
      border: none;
      color: #FFF;
      font-size: 105%;
      letter-spacing: 0.5em;
      margin: 20px 0 0 0;
    }

    div#s_btnbg {
      width: 260px;
      margin: 0 auto;
    }



    /* ===== 2026-09 追加 ===== */
    #info_txbox { width: 100%; }
    #works_tx { font-size: 3.4vw; white-space: nowrap; }   /* 注記: 画面幅に合わせて文字を伸縮させ、どのスマホでも3行に固定 */
    #fm_tx2 { font-size: 0.9em; line-height: 1.8; }
    #foot_insta { padding: 18px 0 0 0; }
    #foot_insta a { font-size: 0.9em; gap: 10px; }
    .foot_insta_icon { width: 36px; height: 36px; }
    .foot_insta_icon img { width: 36px; height: 36px; }
    #insta_box { padding: 0 0 10px 0; }
    .insta_card { flex-direction: column; padding: 20px 15px; font-size: 0.9em; text-align: center; }
    .insta_icon { width: 90px; height: 90px; border-radius: 22px; margin-bottom: 12px; }
    .insta_icon img { width: 52px; height: 52px; }
    .insta_tx { padding-left: 0; }
    #hours_box { padding: 0 0 20px 0; }
    #hours_list { padding: 15px; font-size: 0.85em; }
    #hours_list dt { float: none; width: auto; padding: 10px 0 0 0; }
    #hours_list dd { margin-left: 0; padding: 4px 0 10px 0; }
    #group_box { padding: 0 0 20px 0; }
    .group_card { padding: 15px; font-size: 0.85em; }
    .group_img { float: none; width: 100%; margin-bottom: 15px; }
    .group_tx { margin-left: 0; }
    #phil_bg { padding: 20px 0 30px 0; }
    #phil_head, #phil_body { width: auto; padding: 0 15px; flex-direction: column; }
    #phil_head { margin-bottom: 15px; }
    #phil_logo { width: 70%; max-width: 300px; margin-bottom: 10px; }
    #onecolumn_page h3#phil_ttl { text-align: center; font-size: 1.15em; padding: 0; }
    #phil_fig { width: 80%; max-width: 320px; margin-bottom: 20px; }
    #phil_txt { padding-left: 0; width: 100%; }
    #phil_sub { font-size: 1em; }
    #phil_tx { font-size: 0.9em; line-height: 1.9; }
    #flow_bg { padding: 20px 0 30px; }
    #flow_list { width: 92%; font-size: 0.9em; }
    #flow_list::before { left: 22px; top: 20px; bottom: 20px; width: 3px; }
    #flow_list li { margin: 0 0 18px 64px; padding: 14px 14px 14px 16px; }
    #flow_list li::before { top: 22px; }
    #flow_list li::after { top: 23px; }
    .flow_num { left: -64px; top: 8px; width: 48px; height: 48px; line-height: 48px; font-size: 1.3em; box-shadow: 0 0 0 4px #fff, 0 0 0 6px #cde7cd; }
    .flow_ttl { font-size: 1.1em; gap: 8px; }
    .flow_icon { width: 22px; height: 22px; }
    #flow_list .flow_btn a { width: 100%; max-width: 220px; margin: 12px 0 0 0; box-sizing: border-box; }
}