@charset "utf-8";
/* 使用フォント---------------------------------- */
/* 
font-family: 'Cinzel',serif;
font-family: 'Cormorant',serif;
font-family: 'Cormorant Garamond',serif;
font-family: 'Lato',sans-serif;
font-family: 'Playfair Display',serif;
 */
/* -------------------------------------------- */

body{
    margin: 0;
}
/* aタグのclassをlinkと設定してリンクの下線を消去 */
.link{
    text-decoration: none;
}
button{
    background-color: white;
}

/* section1-PC (トップ画像section)---------------- section1-PC */

.top_image{
    background-image: url(img/top.jpeg);
    background-repeat: no-repeat;
    background-size: cover;
    background-position: 50% 50%; 
    width: 100%; 
    height: 80vh;    
}

.top_image h1{
    font-size: 4.5rem;
    font-family: 'Playfair Display', serif;
    font-style: italic;
}
.sect1_block2 button {
    color: #000;
    margin-top: 8%;
    font-size: 14px;
    border-radius: 50px;
    height: 52px;
    width: 184px;
    border: none;
    font-family: 'Lato', sans-serif;
    font-weight: 700;
}

.sect1_block2 {
    text-align: center;
}

/* section2-PC  背景のカラーが紺色の部分 ---------------- section2-PC */
.section2 {
    background-color: #2A2E41;
    margin-bottom: -135px;
}
/* OUR SERVICESのテキストと画像横並びの部分 */
.sect2_block1 {
    width: 830px;
    height: 270px;
    background-color: white;
    /* OUR SERVICESのテキストと画像の部分で背景白色の枠の部分を少し上に配置するコード */
    position: relative;
    top: -135px;
    /* padding-top: 8px; */
    margin-bottom: 7%;
}

.sect2_block1 img{
    width: 105%;
    margin-left: 20px;
}

.sect2_block1 h2{
    font-family: 'Cormorant SC', serif;
    font-size: 28px;
    font-weight: 600;
}
.sect2_block2{
    position: relative;
        top: -135px;
}
/* 間隔を微妙に調整 */
.sect2_block2_top{
    margin-bottom: 1%;
}
.services{
    width: 100%;
}
.services_img{
    width: 100%;
}
.services_text {
    margin: 0 20px;
    padding: 20px;
    width: 100%;

}

.sect2_block1 p{
    font-family: 'Playfair Display', serif;
    font-size: 16px;
    color: #000;
    margin: 0;
}

/* What is Total Medi のh2タグとpタグの部分  */
.sect2_block2{
    margin-bottom: 5%;
    width: 80%;
    
}
.sect2_block3_top,.sect2_block2_top{   
    width:273px ;
    height: 72px;
    background-color: white;
    text-align: center;
}

.sect2_block2 h2,.sect2_block3 h2{
    margin: auto;
    font-family: 'Cormorant Garamond', serif;
}

.sect2_block2 p{
    font-family: 'Playfair Display', serif;
    text-align: center;
    width: 669px;
    font-size: 20px;
    color: aliceblue;
}

/* sect2_block3(OUR SERVICES項目 画像とテキスト縦並び) */
.sect2_block3{
    width: 80%;
    position: relative;
        top: -135px;
}
.sect2_block3 h2,.sect2_block3 h3{
    font-family: 'Cormorant Garamond', serif;
}
.sect2_block3 p,.sect2_block3 h3{
    color: white;
    padding: 0 20px;
}
.sect2_block3 p {
    font-family: 'Lato', sans-serif;
    font-weight: 300;
}
.sect2_block3 img{
    width: 100%;
}

/* section3-PC  背景のカラーが白い部分 ------------------ section3-PC*/
/* 画像が横に３つ繋がっている画像 */
.section3{
    background-color: white;
}
.section3 img{
    width: 80%;
}

.section3 h2{
    font-family: 'Playfair Display', serif;
    font-size: 29px;
    font-weight: 800;
    margin-top: 25px;
    margin-bottom: 20px;
    
}

.types_pc h2{
    padding:7% 0 ;
}

/* medal member 画像のある部分のクラスmedal_space*/
.medal_space {
    margin-top: 35px;
    background-color: #F2F7F0;
    height: 400px;
    width: 200px;
    font-family: 'Lato', sans-serif;
    font-size: 16px;
}
/* family memberの画像のある部分のクラスfamily_space */
.family_space {
    margin-top: 35px;
    background-color: #F2F7F0;
    height: 400px;
    width: 200px;
    font-family: 'Lato', sans-serif;
    font-size: 16px;
}
.medal_space h3{
    font-size: 22px;
    padding-bottom: 10px;
    font-family: 'Playfair Display',serif;
    font-weight: 800;
    text-align: center;
    position: relative;
        top: -15px;
}
.family_space h3 {
    font-size: 22px;
    padding-bottom: 10px;
    font-family: 'Playfair Display', serif;
    font-weight: 800;
    text-align: center;
    position: relative;
    top: -20px;
}
.medal_space p {
    padding: 0 15px 20px;
    position: relative;
    top: -15px;
}
.family_space p {
    padding: 0 15px 20px;
    position: relative;
    top: -20px;
}
.medal_space img {
    width: 52px;
    position: relative;
    top: -23px;
    left: 10px;
}
.family_space img {
    width: 170px;
    position: relative;
    top: -27px;
}
.sect3_block3_text {
    width: 60%;
    color: #555555;
    font-size: 18px;
    font-family: 'Playfair Display', serif;
}

/* section4-PC (sight seeingの項目 画像 テキストの部分 )- section4-PC */
.section4{
    background-color: #978493;
}
/* section4のトップとボトムに余白を入れている */
.sect4_block1 img,.sect4_block4{
    width: 450px;
    margin:30px 0 30px;
}
.sect4_block2 img{
    width: 80%;
    align-items: center;
}
.sect4_block3{
    font-family: 'Playfair Display', serif;
    font-size: 20px;
    font-weight: 300;
    width: 80%;
    background-color: #F1F1F1;
    color: #333333;
    padding:30px 70px 75px 61px ;
}
/* テキスト真ん中のアンダーラインと斜体になっているテキスト部分 */
.center_text{
    font-size:24px ;
    font-family: 'Cormorant Garamond', serif;
    font-style: italic;
}
/* pleaseから始まる文章のクラス名 */
.Please {
    margin: 0 auto;
    text-align: center;
    width: 80%;
    /* background-color: #D8B8D1;
    color: #5c5c5c; */
    color: #978493;
    font-family: 'Playfair Display', serif;
    font-size: 30px;
    height: 20%;
    padding: 10px 20px 20px;
}
.Please p{
    margin-bottom: 0;
}

.button2 {
    margin-top: 20px;
    margin-bottom: 70px;
    font-size: 0.75rem;
    border-radius: 50px;
    height: 60px;
    width: 270px;
    font-size: 30px;
    background-color:#978493 ;
    color: #fff;
    border: none;
    font-family: 'Lato', sans-serif;
    font-weight: 600;
}

.button2_section {
    text-align: center;
}

/* section5-PC マップと会社名、住所、連絡先、シェアボタン--- section5-PC */
.section5{
    padding: 40px 0 0;
}

.info{
    width: 90%;
}
.map{
    width: 90%;
}
.sect5_block1{
    text-align: center;
}



.sect5_block2 h3,.sect5_block2 p{
    text-align: center;
}
.sect5_block2 h3{
    font-family: 'Cormorant', serif;
}
.sect5_block2 p{
    font-family: 'Lato', sans-serif;
    font-weight: 300;
    font-size: 15px;
}
.share_button {
    width: 100%;
    margin-bottom: 10px;
}
.share_facebook img{
    border-radius: 10px;
    width: 110px;
}
.share_twitter img{
    border-radius: 10px;
    width: 110px;
}
.share_twitter{
    margin-left: 20px;
}

/* footer-PC-------------------------------------------footer-PC */
footer{
    background-color: #2A2E41;
    color: white;
    height: 30px;
    text-align: center;
    font-family: 'Cinzel', serif;
    font-size: 12px;
    font-weight: 400;
}
footer p{
    padding-top: 7px;
}

/* レスポンシブ対応 -----------------------------------レスポンシブ対応 */

/* 991px以下 タブレット時に現れる ------------------------------------ */
@media(min-width: 992px) {
.sp {
    display: none !important;
}

}
/* 480px以下 スマホ時に現れる ---------------------------------------- */
@media(min-width: 481px) {
    .sp2 {
        display: none !important;
    }

}
/* sect2_block1に使用している少し複雑なレスポンシブ対応 */
/* HTMLのservicesクラス内の５つあるimgのあるクラスのうち上２つは横幅767px以下では表示されない */
/* 真ん中のimg2クラスは767px以下351pxまで表示される */
/* 下二つのクラスは350px以下で表示される */


@media(min-width: 481px) and (max-width: 767px) {
    /* 481pxから767pxの間では表示されない*/
    .tab_none {
        display: none !important;
    }

}

@media(min-width: 768px) {
    /* 767px以下で表示 */
    .tab {
        display: none !important;
        padding: 5%;
        margin: 5%;
    }

}
@media(max-width: 480px) {
    /* 481px以上で表示 */
    .tab {
        display: none !important;
        padding: 5%;
        margin: 5%;
    }

}
/* 352px以下 スマホレスポンシブ時に現れる ---------------------------------------- */
@media(min-width: 352px) {
    .sp_sm {
        display: none !important;
    }

}
/* 351px以上 スマホレスポンシブ時に現れる ---------------------------------------- */
@media(max-width: 351px) {
    .sp_big {
        display: none !important;
    }

}
/* sect2_block1に使用している少し複雑なレスポンシブ対応終わり */

/* 991px以下に適用されるCSS（タブレット用）-------------- CSS for TABLET */
@media screen and (max-width: 991px) {
/*cssクラス pcは959px以下で非表示 */
.pc {
        display: none !important;
    }
/* section1-TAB (トップ画像section) -------------------section1-TAB */
.sect1_block2 button{
    font-size: 14px;
}

/* section2-TAB  背景のカラーが紺色の部分)----------------section2-TAB */
.sect2_block1 {
    width: 95%;
    height: 30%;
    background-color: white;
    margin-bottom: 13%;
}

.sect2_block1 img {
    width: 100%;
}

.services{
    align-items: center;
}
.services img{
    margin: 10px 0 10px 0;
}


.what {
    margin-bottom: 30px;
    width: 80%;

}

.sect2_block2 {
    margin-bottom: 10%;
}
.sect2_block2_top {
    margin-bottom: 7%;
}
.sect2_block3_top{
    margin-bottom: 7%;
}


/* レスポンシブ時に要素の箇所の交代 */
.order1 {
    order: 2;
    padding-bottom: 6%;
}

.order2 {
    order: 1;
}
.order3 {
    order: 4;
    padding-bottom: 6%;
}
.order4 {
    order: 3;
}
.order5 {
    order: 5;
}
.order6 {
    order: 6;
}
.order,.order6{
    padding-bottom: 6%;
}
.sect2_block3{
    width: 90%;
}
.sect2_block3 img{
    margin-bottom: 3%;
}

/* section3-TAB  背景のカラーが白い部分 -----------------section3-TAB*/   
.section3 img {
    width: 100%;
}

.sect3_block3{
    width: 80%;
}
/* メダル部分のレスポンシブ 複雑です */
.medal_space {
    margin-top: 35px;
    background-color: #F2F7F0;
    height: 370px;
    width: 95%;
    font-size: 16px;
}


.medal_space2 {
    margin-top: 35px;
    background-color: #F2F7F0;
    height: 370px;
    width: 95%;
    font-size: 16px;
}

.family_space {
    margin-top: 35px;
    background-color: #F2F7F0;
    height: 370px;
    width: 95%;
    font-size: 16px;
}

.medal_space h3 {
    font-size: 22px;
    padding-bottom: 10px;
    font-family: 'Playfair Display', serif;
    font-weight: 800;
    text-align: center;
    position: relative;
    top: -15px;
}
.family_space h3 {
    font-size: 22px;
    padding-bottom: 10px;
    font-family: 'Playfair Display', serif;
    font-weight: 800;
    text-align: center;
    position: relative;
    top: -27px;
}
.medal_space p {
    position: relative;
    top: -15px;
}
.family_space p {
    position: relative;
    top: -25px;
}

.medal_space img {
    width: 60px;
    position: relative;
    top: -30px;
    left: 5px;
}

.family_space img {
    width: 200px;
    position: relative;
    top: -33px;
}
.sect3_block3_text{
    width: 70%;
}

/* section4-TAB (sight seeingの 画像 テキストの部分)-- section4-TAB */   
.sect4_block2 img {
    width: 100%;
    align-items: center;
}
.sect4_block1 img {
    width: 300px;
    margin: 30px 0 30px;
}

.sect4_block3 {
    width: 100%;
    font-size: 18px;
}

.center_text {
    font-size: 20px;
}

.Please {
    margin: 30px auto 0;
    text-align: center;
    width: 90%;
    background-color: #fff;
    font-family: 'Playfair Display', serif;
    font-size: 24px;
    height: 5%;
    padding: 0;
}
.Please p{
    padding: 3% 20px 3%;
}

.button2 {
    margin-top: 20px;
    margin-bottom: 50px;
    font-size: 0.75rem;
    border-radius: 50px;
    height: 50px;
    width: 250px;
    font-size: 25px;
    border: none;
    font-family: 'Lato', sans-serif;
    font-weight: 600;
}
.button2_section {
    text-align: center;
}

/* section5-TAB マップと会社名、住所、連絡先、シェアボタン - section5-TAB */
.section5 {
    padding: 0;
    margin: 50px 0 30px;
}

.map {
        width: 100%;
        height: 400px;
        margin-bottom: 20px;
    }
}

/* 480px以下に適用されるCSS（スマホ用） ------------------- CSS for SP */
@media screen and (max-width: 480px) {
/* スマホフォント基本サイズ h1 24px,h2 22px,h3 20px,p 16px*/
/*cssクラス pc2は480px以下で非表示 */
.pc2 {
        display: none !important;
    }
h2{
    font-size: 20px;
}
h3{
    font-size: 18px;
}
p{
    font-size: 16px;
}
/* section1-SP (トップ画像section)---------------------section1-SP */
.top_image h1 {
        font-size: 40px;
}
/* top_image(トップ画像のボタン部分) */

.sect1_block2 button {
    margin-top: 20%;
    border-radius: 50px;
    height: 52px;
    width: 184px;
    /* font-size: 16px; */
    font-size: 14px;
    /* font-size: 12px; */
    border: none;
    font-family: 'Lato', sans-serif;
    font-weight: 800;
}

/* section2-SP  背景のカラーが紺色の部分)------------------section2-SP */
/* sect2_block1 (OUR SERVICE 画像とテキストの部分) */

.sect2_block1 {
    width: 100%;
    height: 70%;
    padding-top: 5%;
    padding-bottom: 5%;
}

.sect2_block1 h2{
    font-size: 20px;
}
.services {
    width: 370px;
    padding: 0;
    /* margin-top: 20px; */
}
.services_img{
    align-items: center;
}
.services_text {
    margin: 0px;
    padding: 0px;
    /* padding-left: 40px; */
    width: 100%;

}
.img1 img {
    width: 100%;
    margin-left: 0px;
    padding-left: 0px;
    margin-top: 0px;
    /* margin-bottom: 5px; */
}
.img2 img{
    width: 100%;
}



.services_text {
    font-size: 16px;

}

.sect2_block1 {
    margin-bottom: 15%;
}

.sect2_block1 h2{
    font-size: 21px;
    margin-bottom: 10%;
}
/* what(What is Total Mediのh２、pタグの部分) */
.sect2_block2{
    margin-bottom:8%;
}
.sect2_block2_top{
    margin-bottom: 10%;
}
.sect2_block2 h2{
    font-size: 22px;
}

.sect2_block2 p {
    font-size: 16px;
}
.sect2_block3_top{
    margin-bottom: 11%;
}
.order,.order1,.order3,.order6{
    padding-bottom: 5%;
}
.sect2_block3 p,
.sect2_block3 h3 {
    color: white;
    padding: 0 10px;
}
.sect2_block3 h2 {
    font-size: 22px;
}
.sect2_block3 h3{
    font-size: 20px;
}
.sect2_block3 p {
    font-size: 16px;
}

/* section3-SP  背景のカラーが白い部分 --------------------section3-SP*/
.sect3_block2 {
    padding-top: 7%;
    width: 100%;
}
.sect3_block3{
    display: flex;
    width: 90%;
    align-items: center;
}
.types_sp{
    width: 50%;
    text-align: center;
}
.types_sp h2 {
    font-family: 'Playfair Display', serif;
    font-size: 20px;
    font-weight: 800;
}
.types_sp_img{
    width: 40%;
}
.sect3_block3{
    width: 90%;
}
.sect3_block3_text{
    width: 90%;
    font-size: 14px;
} 
/* メダル部分のレスポンシブ */
.medal_space {
    margin-top: 35px;
    background-color: #F2F7F0;
    height: 205px;
    width: 100%;
    font-size: 16px;
}
.family_space {
    margin-top: 35px;
    background-color: #F2F7F0;
    height: 200px;
    width: 100%;
    font-size: 16px;
}
.medal_space h3 {
    font-size: 18px;
    padding-bottom: 0px;
    font-family: 'Playfair Display', serif;
    font-weight: 800;
    text-align: center;
    position: relative;
    top: -30px;
}
.family_space h3 {
    font-size: 18px;
    padding-bottom: 10px;
    font-family: 'Playfair Display', serif;
    font-weight: 800;
    text-align: center;
    position: relative;
    top: -25px;
}
.medal_space p {
    padding: 0 5px 20px 10px;
    position: relative;
    top: -25px;
}

.family_space p {
    padding: 0 15px 20px;
    position: relative;
    top: -30px;
}

.medal_space img {
    width: 45px;
    position: relative;
    top: -20px;
    left: 10px;
}
.family_space img {
    width: 140px;
    position: relative;
    top: -20px;
    left: 2px;
}

/* section4-SP (sight seeingの項目 画像 テキストの部分 )---section4-SP */
.sect4_block3 {
    font-size: 16px;
    width: 90%;
    background-color: #F1F1F1;
    color: #333333;
    padding: 20px 10px 25px 10px;
    margin: 20px 0 10px;
}
/* section4 下部分のテキストの真ん中のアンダーラインテキスト部分 */
.center_text {
    font-size: 18px;
}
/* button2(section4のボタン関連部分) */
.Please {
    /* background-color: #D8B8D1; */
    width: 100%;
    color: #978493;
    font-family: 'Playfair Display', serif;
    font-size: 20px;
    height: 5%;
    padding:  0;
    /* margin-top: 10px; */
}
.Please p {
    padding: 5% 20px 5%;
}
.button2 {
    margin: 20px auto 50px;
    font-size: 0.75rem;
    border-radius: 50px;
    height: 38px;
    width: 172px;
    font-size: 20px;
    color: #fff;
    border: none;
    font-family: 'Lato', sans-serif;
    font-weight: 600;
}

/* section5-SP マップと会社名、住所、連絡先、シェアボタン----section5-SP */
.section5 {
    margin-bottom: 0px;
}
.map {
    height: 300px;
}
.info{
    width: 95%;
}
.sect5_block2 {
    font-size: 16px;
    text-align: center;
}
.sect5_block2 h3{
    font-size: 24px;
}
.sect5_block2 p {
    font-size: 16px;
}
/* section5(snsシェアボタンの部分) */
.share_button {
    margin-bottom: 10px;
    margin-left: 0;
}
.share_facebook img{
    width: 100px;
}

.share_twitter img{
    width: 100px;
}

}