/* メディアクエリ PC */
@media (min-width:415px){

    /* 全体 */
    html, body {
        height: 100%;
        background: #CAEFCE;
    }

    #container {
        background:#fff;
        margin:auto;
        width:1200px;
        font-family:"Noto Sans JP", "Hiragino Kaku Gothic Pro", "ヒラギノ角ゴ Pro", "Yu Gothic Medium", "游ゴシック Medium", YuGothic, "游ゴシック体", "メイリオ", sans-serif;
    }

    img {
        width: 100%;
        height: auto;
    }

    h1 {
        letter-spacing: 0.1em;
    }

    h2 {
        letter-spacing: 0.1em;
    }

    h3 {
        letter-spacing: 0.1em;
    }

    p {
        font-size: 16px;
        line-height: 1.7;
        letter-spacing: 0.1em;
    }

    /* ヘッダー */
    header {
        background:#fff;
        padding-top: 40px;
        height:200px;
    }

    header a {
        text-decoration: none;
        color:#25B13A;
    }

    header h1 {/*接骨院名称*/
        font-size:45px;
        margin-bottom:7px;
        margin-top:10px;
    }

    header h2 {/*接骨院名称（キャッチコピー）*/
        font-size:15px;
        float:left;
        width:620px;
        color:#25B13A;
        margin-top:10px;
    }

    header #name { 
        padding-left:30px;
        padding-top:30px;
        width:800px;
        color:#25B13A;
    }

    header #name img {/*ロゴ*/
        width:140px;
        float:left;
        margin-right:40px;
    }

    header #name p {/*接骨院・英語名称*/
        font-size:16px;
    }

    #headerDetail {
        width:350px;
        float:right;
        color:#25B13A;
        margin-top:-120px;
    }

    #headerDetail address {
        font-size:14px;
        line-height:1.7;
        font-style:normal;
        letter-spacing: 0.1em;
        margin-top:-3px;
    }

    #headerDetail p {/*ヘッダー内・院の概要*/
        font-size:14px;
        line-height:1.7;
        font-style:normal;
        letter-spacing: 0.1em;
        margin-bottom:10px;
    }

    #headerDetail #inquiryButton {/*お問い合わせボタン*/
        width: 180px;
        float: left;
        font-size: 12px;
        background: #DA503E;
        height: 30px;
        line-height: 30px;
        text-align:center;
        border-radius: 30px;
        letter-spacing: 0.1em;
    }

    #headerDetail #inquiryButton a {
        text-decoration:none;
        color:#fff;
    }

    #headerDetail #tel {/*電話ボタン*/
        width: 100px;
        float: right;
        font-size: 10px;
        color: #fff;
        background: #156BB2;
        height: 30px;
        line-height: 30px;
        padding: 0 0 0 40px;
        border-radius: 30px;
        margin-right: 20px;
        letter-spacing: 0.1em;
    }

    #headerDetail #tel a {
        text-decoration:none;
        color:#fff;
    }

    header #tel img {
        width:30px; /*電話マークの幅*/
        margin-left:7px;
    }

    #headerDetail ul {/*お問い合わせボタン・電話ボタンのul*/
        position: relative;
        line-height: 1;
        margin-bottom:60px;
    }

    #headerDetail ul li {
        margin-bottom: 10px;
    }

    #headerDetail ul li img {/*電話ボタン内・電話マークの位置調整*/
        position: absolute;
        left:185px;
        top:2px;
    }

    .headerDetail_info {
        margin-top:-40px;
    }

    #medicalHours_header {/*受付時間（header）*/
        line-height:1.7;
        font-size:14px;
        text-align:left;
        letter-spacing: 0.1rem;
    }

    /* nav */
    nav {
        margin-bottom: 60px;
        text-decoration: none;
    }

    #nav_touchDevice {/* PCは非表示 */
        display: none;
    }

    nav ul {
        display: flex;
        background:#25B13A;
    }

    nav ul .navListWrapper {/*navの各項目*/
        width:240px;
        border-right:solid 3px #ffffff;
    }

    nav ul .navListWrapper:first-child {/*navの左端を0*/
        border-left:none;
    }

    nav ul .navListWrapper:last-child {/*navの右端を0*/
        border-right:none;
    }

    nav ul li a {
        text-decoration: none;
        color:#156BB2;
    }

    nav ul .navIcon {/*各項目のアイコン画像調整*/
        height:70px;
        width:60px;
        margin:0 auto;
    }

    nav ul .navIcon img {
        padding-top:5px;
        margin-left:-10px;
    }

    nav ul .navText {/*各項目のテキスト*/
        font-size:13px;
        letter-spacing:0.1em;
        height:70px;
        line-height:70px;
        margin:0 auto;
        margin-left:-20px;
        color:#fff;
    }

    /* index.html/top画像3枚 */
    .topPhoto {
        position: relative;
    }

    .topPhoto .photoFirst {/* スライドショー1枚目 */
        position: absolute;
        top:300px;
        left:540px;
        color:#fff;
        font-size:40px;/* 画像内キャッチコピー */
        line-height:1.3;
        font-weight: bold;
        text-align: right;
        letter-spacing:0.1em;
        z-index:99999;
    }

    .topPhoto .photoSecond {/* スライドショー2枚目 */
        position: absolute;
        top:300px;
        left:120px;
        color:#fff;
        font-size:40px;/* 画像内キャッチコピー */
        line-height:1.3;
        font-weight: bold;
        text-align: left;
        letter-spacing:0.1em;
        z-index:99999;
    }

    .topPhoto .photoThird {/* スライドショー3枚目 */
        position: absolute;
        top:350px;
        left:760px;
        color:#fff;
        font-size:40px;/* 画像内キャッチコピー */
        line-height:1.3;
        font-weight: bold;
        text-align: right;
        letter-spacing:0.1em;
        z-index:99999;
    }

    .topPhoto img {
        border-radius: 30px;
        margin-top:75px;
        width:64rem;
        height:26rem;
        display: block;
        margin: 0px auto;
    }

    /* スライドショー（PC表示・SP非表示の制御） */
    .pc { 
        display: block !important;
     }

    .sp { 
        display: none !important;
    }

    .topPhotoWrapper_sp {
        display:none;
    }

    /* 広告文 */
    #topSalesWriting {
        margin:0 150px 70px 150px;
        padding:55px;
        background: #CAEFCE;
        border-radius:30px;
    }

    #topSalesWriting h3 {/* 広告文見出し */
        text-align: center;
        line-height:1.5;
        font-size:20px;
        margin-bottom:50px;
    }

    #topSalesWriting #ad_writing_inner {/* 広告文本文 */
        font-size:14px;
        margin-bottom:50px;
        text-align: left;
    }

    #topSalesWriting #linkToFlowWrap {
        text-align:center;
    }

    #topSalesWriting #linkToFlow {
        margin-bottom:0;
        background: linear-gradient(transparent 65%, #DA503E 65%);
    }

    #topSalesWriting #linkToFlowWrap a {/* 「施術の流れを見る」リンク */
        text-decoration: none;
        color:#333333;
        font-size:18px;
    }

    /* メインコンテンツ（共通） */
    #mainContents {
        margin-bottom:80px;
    }

    #mainContents h2 {/* 見出し */
        font-size:22px;
        padding:20px 45px 15px 50px;
        background:#CAEFCE;
        color:#333333;
        margin: 0px 25px 60px 25px;
        border-radius:30px;
        font-weight:normal;
    }

    #mainContents section {
        margin-bottom:80px;
    }

    /* お知らせ */
    #mainContents #scheduleWrap {
        margin-left:50px;
        margin-right:50px;
        margin-bottom:100px;
    }

    #mainContents #scheduleWrap .schedule {
        font-size:14px;
        border-bottom: dotted 1px #333333;
        padding-bottom:12px;
        margin-bottom:50px;
    }

    #mainContents #scheduleWrap .schedule .schedule_month {
        font-weight: bold;
    }

    #mainContents #scheduleWrap .schedule .schedule_contents {
        letter-spacing: 0.1em;
    }

    #mainContents .schedule {
        text-indent: -6em;
        padding-left: 6em;
        line-height:1.5;
    }

    /* お問い合わせ・診療時間（共通） */
    #medicalHours {
        background-image:url(../images/contact_us_bg.jpg);
        height:400px;
        width:1200px;
        overflow:hidden;   
    }

    #medicalHours_bgWrapper {/* 全体のbackgroundimageを透過させる */
        background-color:rgba(255,255,255,0.6);
        height:100%;
    }

    #medicalHours .inquiry_wrapper {/* お問い合わせ部分全体 */
        width:400px;
        padding:90px 70px;
        float:left;
    }

    #medicalHours .inquiry_wrapper img {/* 接骨院ロゴ */
        width:90px;
        margin-right:30px;
        float:left;
    }

    #medicalHours .inquiry_wrapper h3 {/* 接骨院名称 */
        font-size:38px;
        color:#25B13A;
        padding-top:5px;
    }

    #medicalHours .inquiry_wrapper p {/* 接骨院名称（サブ） */
        font-size:16px;
        color:#25B13A;
    }

    #medicalHours .inquiry_wrapper a {
        text-decoration: none;
     }

    #medicalHours .inquiry_wrapper address {
        clear:both;
        margin-top:15px;
        line-height:2;
        margin-left:10px;
        margin-bottom:30px;
        float:left;
        width:315px;
        letter-spacing: 0.1em;
        font-size:15px;
        font-style:normal;
    }

    #medicalHours .inquiry_wrapper #facebook {
        padding-top:15px;
    }

    #medicalHours .inquiry_wrapper #facebook img {
        width:40px;
        height:40px;
    }

    #medicalHours .inquiry_wrapper h4 {
        position:relative;
        clear:both;
    }

    #medicalHours .inquiry_wrapper h4 img {/* メールの画像 */
        position:absolute;
        top:15px;
        left:100px;
        width:30px;
    }

    #medicalHours .inquiry_wrapper h4 .inquiryButton {/* お問い合わせボタン */
        background: #25B13A;
        color:#fff;
        padding:20px 40px 20px 80px;
        border-radius:30px;
        display:inline-block;
        letter-spacing:0.1em;
        margin-left:70px;
    }

    #medicalHours .medicalHours_wrapper {/* 診療時間部分全体 */
        padding:90px 0px 0px 0px;
    }

    #medicalHours .medicalHours_wrapper table {
        border:solid 1px #fff;
        background: rgba(37, 177, 58, 0.7);
        color:#fff;
    }

    #medicalHours .medicalHours_wrapper table .medicalHours_itself {/* 「診療時間」文字 */
        border:solid 1px #fff;
        font-weight:normal;
        padding:20px 40px;
        font-size:19px;
        letter-spacing:0.1em;
        width:100px;
        text-align: center;
    }

    #medicalHours .medicalHours_wrapper table .medicalHours_morning, .medicalHours_afternoon {
        border:solid 1px #fff;
        font-weight:normal;
        padding:20px 0px;
        text-align: center;
        line-height:1.5;
        letter-spacing:0.1em;
    }

    #medicalHours .medicalHours_wrapper table td {
        border:solid 1px #fff;
        width:50px;
        text-align: center;
        vertical-align: middle;
    }

    #medicalHours .medicalHours_wrapper table .saturday {/* 土曜日部分の幅 */
        width:160px;
    }

    /* 地図 */
    #accessmap {
        position: relative;
        padding-bottom:500px;
        clear:both;
        height:0;
    }

    #accessmap iframe {
        position: absolute;
        top:0;
        left:0;
        width:100%;
        border:0;
        height:100%;
    }

    /* フッター */
    footer {
        background:#25B13A;
    }

    footer p {
        color:#fff;
        font-size:12px;
        text-align: center;
        letter-spacing: 0.1em;
        padding:15px 0;
    }

    /* 上に戻るボタン */
    #gototop {
        z-index:20000;
        position:fixed;
        bottom:2%;
        right:8%; 
    }
    
    #gototop a {
        display:block;
        width:3rem;
        height:3rem;
        line-height:3.3rem;
        font-weight:bold;
        color:#fff;
        background:#156BB2;
        font-size:2rem;
        text-decoration: none;
        text-align:center;
        border-radius:50%;
    }
    
    #gototop a:hover {
        background:rgba(151,211,227,0.7);
    }
}

/* メディアクエリ タッチデバイス */
@media(max-width:414px){

    /* 全体 */
    html, body {
        height: 100%;
        font-family: sans-serif;
    }

    #container {
        background:#fff;
        position: relative;
        overflow:hidden;
    }

    img {
        display: block;
        width: 100%;
        height: auto;
    }

    p {
         font-size:1rem;
         line-height:1.7;
         letter-spacing:0.1rem;
    }

    h1 {
        letter-spacing: 0.1rem;
    }

    h2 {
        letter-spacing: 0.1rem;
    }

    h3 {
        letter-spacing: 0.1rem;
    }

    a {
        color: rgba(0, 0, 0, 0);
    }

    /* ヘッダー */
    header {
        color:#25B13A;
    }
    
    header a {
        text-decoration: none;
        color:#25B13A;
    }

    header #name img {/*ロゴ*/
        width:3.5rem;
        float:left;
        margin:1.5rem 0.7rem;
    }

    header #name h1 {/*接骨院名称*/
        font-size:1.5rem;
        letter-spacing: 0.2rem;
        padding-top:1.5rem;  
    }

    header #name p {/*接骨院サブ名称*/
        font-size:0.7rem;
        letter-spacing: 0.1rem;  
    }

    header #name h2 {/*キャッチコピー*/
        font-size:1.1rem;
        padding:1.2rem;
        line-height:1.5;
    }

    #headerDetail {/*header右枠・positionで位置調整*/
        position: absolute;
        top:33rem;
        width:100%;
    }

    .headerDetail_intro {/*header治療院説明*/
        margin: 0 0 1rem 1rem;
        letter-spacing: 0.1rem;
        text-align: left;
    }

    .headerDetail_info {/*header電話・住所の枠*/
        background: #CAEFCE;
        padding:1rem 0;
        font-size:0.9rem;
    }

    address {
        margin-bottom:0.5rem;
    }

    #headerDetail ul {
        display: flex;
    }

    #headerDetail li img {
        width:1.5rem;
        float:left;
        margin-right:0.5rem;
        position: absolute;
        top:0.5rem;
    }

    #headerDetail li {
        float:left;
        margin:0 auto;
        position: relative;
    }

    #headerDetail #inquiryButton a, #headerDetail #tel a {/*問い合わせボタンリンク*/
        color:#fff;
    }

    #headerDetail #inquiryButton {/*問い合わせボタン*/
        background: #DA503E;
        padding:0.8rem;
        border-radius:1.5rem;
    }

    #headerDetail #tel {/*電話ボタン*/
        background: #4D5FA3;
        padding:0.8rem 0.8rem 0.8rem 0.2rem;
        border-radius:1.5rem;
    }

    #headerDetail #tel img {/*電話ボタンの電話マークに傾きをつける*/
        transform: rotate(-30deg);
    }

    .telnumber {
        margin-left:2rem;
    }

    #nav_PC {/*PCのnavを非表示*/
        display:none;
    }

    /*スライドショー*/
    .topPhoto {
        position: relative;
    }

    .topPhoto .photoFirst {/*スライドショー1枚目*/
        position: absolute;
        bottom:0.7rem;
        right:5rem;
        color:#fff;
        font-size:1rem;
        line-height:1.5;
        font-weight: bold;
        text-align: right;
        z-index:99999;
    }

    .topPhoto .photoSecond {/*スライドショー2枚目*/
        position: absolute;
        bottom:0.7rem;
        left:5rem;
        color:#fff;
        font-size:1rem;
        line-height:1.5;
        font-weight: bold;
        text-align: left;
        z-index:99999;
    }

    .topPhoto .photoThird {/*スライドショー3枚目*/
        position: absolute;
        bottom:0.7rem;
        left:5rem;
        color:#fff;
        font-size:1rem;
        line-height:1.5;
        font-weight: bold;
        text-align: right;
        z-index:99999;
    }

    .topPhoto img {/*スライドショー画像位置調整*/
        border-radius: 1rem;
        width:18rem;
        height:18rem;
        margin:0 auto;
    }

    /* スライドショー（PC非表示・SP表示） */
    .pc { 
        display: none !important;
     }

    .sp { 
        display: block !important;
     }

     .topPhotoWrapper_pc {
        display:none;
    }

    /*宣伝文*/
    .topSalesWritingWrapper {
        width:100%;
        margin-top:22rem;
    }

    #topSalesWriting {
        margin:16rem 1rem 0 1rem;
        background:#CAEFCE;
        padding:1.5rem 1rem;
        border-radius:1.5rem;
    }

    #topSalesWriting h3 {
        margin:0 auto;
        font-size:1.1rem;
        line-height:1.6;
        text-align: center;
    }

    #topSalesWriting #ad_writing_inner {
        margin-top:1rem;
    }

    #linkToFlowWrap {
        margin-top:1rem;
        text-align: center;
    }

    #linkToFlowWrap a {
        color:#303030;
        text-decoration: none;
    }

    #linkToFlow {
        background: linear-gradient(transparent 60%, #DA503E 65%);
    } 

    /*接骨院紹介（下部）、診療時間*/
    #headerDetail #medicalHours_header {
        width:21rem;
        margin:1rem auto 0 1rem;
        color:#303030;
        line-height:1.7;
    }

    /*メインコンテンツ（「お知らせ」より下）*/
    #mainContents {
        width:100%;
    }

    #mainContents h2 {
        margin:3rem 2rem 1.5rem 2rem;
        padding-left:1rem;
        padding-bottom:0.5rem;
        padding-top:0.3rem;
        font-size:0.9rem;
        border-left:solid 0.3rem #25B13A;
        border-bottom:solid 0.05rem #25B13A;
    }

    /*お知らせ（スケジュールの枠）*/
    #mainContents #scheduleWrap {
        margin: 0 2rem;
    }

    #mainContents #scheduleWrap .schedule {
        margin-bottom:1rem;
        font-size:1rem;
        line-height:1.5;
        padding-bottom:1rem;
        border-bottom:dotted 0.05rem #25B13A;
    }

    #mainContents #scheduleWrap .schedule_month {
        font-weight: bold;
    }

    /*お問い合わせ（下部）・診療時間*/
    #medicalHours {   
        width:100%;
        margin-top:4rem;
    }

    #medicalHours_bgWrapper .inquiry_wrapper {
        background-image:url(../images/contact_us_bg.jpg);
    }

    #medicalHours_bgWrapper .inquiry_wrapper_inner {
        background-color:rgba(255,255,255,0.6);
        overflow:hidden;
        padding:2rem 2rem 4rem 2rem;
    }

    /*院名（下部）*/
    #medicalHours_bgWrapper .name_under {
        text-align: center;
    }

    #medicalHours_bgWrapper .name_under a {
        color:#25B13A;
        text-decoration: none;
    }

    #medicalHours_bgWrapper .inquiry_wrapper img {
        width:18%;
        float:left;
        margin-right:0.5rem;
    }

    #medicalHours_bgWrapper .inquiry_wrapper h3 {
        color:#25B13A;
        font-size:1.5rem;
        letter-spacing:0.2rem;
        width:14.5rem;
    }

    #medicalHours_bgWrapper .inquiry_wrapper p {
        color:#25B13A;
        font-size:0.7rem;
        letter-spacing:0.08rem;
        width:14.5rem;
    }

    #medicalHours_bgWrapper .inquiry_wrapper address {
        margin-top:1rem;
        font-style:normal;
        color:#303030;
        line-height:1.5;
        font-size:1rem;
    }

    #medicalHours_bgWrapper #facebook {
        position:relative; 
    }

    #medicalHours_bgWrapper #facebook img {
        position: absolute;
        top:-2rem;
        left:10rem;
        width:2rem;
    }

    #medicalHours_bgWrapper .inquiry_wrapper h4 {/*問い合わせボタン（下部）*/
        margin:2rem auto 0 auto;
        color:#fff;
        background:#25B13A;
        width:70%;
        padding:1rem;
        border-radius: 1.5rem;
    }

    #medicalHours_bgWrapper .inquiry_wrapper h4 a {
        text-decoration:none;
        color:#fff;
        letter-spacing:0.1rem;
        font-size:0.9rem;
    }

    #medicalHours_bgWrapper .inquiry_wrapper h4 img {/*メール記号*/
        width:2rem;
        margin-top:-0.3rem;
        margin-right:2rem;
        margin-left:1rem;
    }

    #medicalHours_bgWrapper .medicalHours_wrapper table {/*診療時間table*/
        width:100%;
        background: #25B13A;
        text-align:center;
    }

    #medicalHours_bgWrapper .medicalHours_wrapper tr {
        border-top:solid #ffffff 0.1rem;
    }

    #medicalHours_bgWrapper .medicalHours_wrapper tr th, td {
        padding:1rem 0;
        color:#fff;
        font-weight:normal;
        letter-spacing:0.1rem;
        font-size:0.8rem;
        vertical-align: middle;
    }

    #medicalHours_bgWrapper .medicalHours_wrapper tr:nth-child(1) {
        border-top:none;
    }

    .medicalHours_itself {/*table内「診療時間」文字*/
        width:9rem;
    }

    .medicalHours_morning, .medicalHours_afternoon {
        line-height:1.5;
    }

    #medicalHours_bgWrapper .medicalHours_wrapper .saturday {
        border-left:solid #fff 0.1rem;
        width:7rem;
    }

    /*地図*/
    #accessmap {
        position: relative;
        padding-bottom:80%;
        overflow:hidden;
        z-index:999999;
    }
    
    #accessmap iframe {
        position: absolute;
        top:0;
        left:0;
        width:100%;
        border:0;
        height:100%;
    }

    /*フッター*/
    footer {
        margin-top:0.5rem;
    }

    footer p {
        font-size:0.6rem;
        text-align:center;
        letter-spacing:-0.01rem;
    }
    
    /*「先頭に戻る」ボタン*/
    #gototop {
        z-index:1000000;
        position:fixed;
        bottom:2.5%;
        right:3%; 
     }
     
     #gototop a {
        display:block;
        width:2rem;
        height:2rem;
        line-height:2.6rem;
        font-weight:bold;
        color:#fff;
        background:#156BB2;
        font-size:1.5rem;
        text-decoration: none;
        text-align:center;
        border-radius:50%;
     }
}

/* IPhoneSE等小型デバイス対応 */
@media(max-width:325px) {

    /* max-width:325pxまで小さくした場合のスライドショーの文字位置対応 */
    .topPhoto .photoFirst {
        position: absolute;
        bottom:0.7rem;
        right:2rem;
        font-size:1rem;
    }

    .topPhoto .photoSecond {
        position: absolute;
        bottom:0.7rem;
        left:2rem;
        color:#fff;
        font-size:1rem;
    }

    .topPhoto .photoThird {
        position: absolute;
        bottom:0.7rem;
        left:2rem;
        color:#fff;
        font-size:1rem;
    }
}