★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★ */ /* ================================================================================ レイアウト ================================================================================ */ /* PC設定 ----------------------------------------------- */ @media (min-width: 768px) { #wrapper{ background-color:#ededed; color:#474343; } main.outer_wrap { position: relative; max-width: none; width: 100%; min-height: 50vh; display: block; padding: 0px 0 0px; margin: 0 auto; } .inner_wrap { position: relative; width: 100%; margin: 0 auto; } .setsumei_midashi{ font-size: 26px; padding: 38px 0 14px 0px; color: #39B598; border-bottom: 3px double; margin: 0 0 20px 67px !important; } .cate_pics{ margin: 0 0 0 67px; } .cate_pics img{ width:100%; } .minimidashi{ font-size: 19px; padding: 26px 0 14px 0px; color: #E09C9C; border-bottom: 3px double; margin: 0 0 20px 60px !important; } .about_pic{ width:100vw; } .about_pic img{ width:100%; } .about_message{ width:900px; margin:0 auto; } .about_title{ color: #ba2636; font-size: 20px; font-size: 33px; padding: 56px 0 0 0; text-align: center; letter-spacing: 2px; text-align:center; } .about_text{ font-size: 18px; color: #565449; padding-top: 30px; padding-bottom: 47px; margin-left: 112px; line-height: 2.5; } } /* table01 */ #table01 tr { border-bottom: 1px solid #b5b1b1; } #table01{ margin:0 auto; } #table01 th, #table01 td { padding: 24px 0; border: none; width: 500px; } #table01 th { width: 238px; text-align: left; } /* sp */ @media only screen and (max-width: 480px) { #table01 th, #table01 td { width: 100%; display: block; } #table01 th { width: 100%; } #table01 td { padding-top: 0; } #table01{ width: 80vw; } } /* SP設定 ----------------------------------------------- */ @media (max-width: 767px) { #wrapper { background-color:#ededed; color:#474343; } main.outer_wrap { position: relative; width: 100%; min-height: 50vh; padding: 0vw 0; } .inner_wrap { position: relative; width: 100%; padding: 0 0vw; } .about_pic{ width:100vw; } .about_pic img{ width:100%; } .wpcf7{ width:90%; margin:0 auto; } .about_message{ width:80vw; margin:0 auto; } .about_title{ color: #ba2636; font-size: 5.5vw; margin-left: 5vw; margin-bottom: 5vw; text-align: center; margin-top: 10vw; letter-spacing: 3px; } .about_text{ font-size: 4vw; color: #565449; padding-top: 3vw; padding-bottom: 11vw; margin-left: 3vw; } } /* ================================================================================ マージンボックス ================================================================================ */ /* PC設定 ----------------------------------------------- */ @media (min-width: 768px) { /* 上にマージンを空ける ----------------------------------------------- */ .top_long { margin-top: 120px; } .top_middle { margin-top: 80px; } .top_short { margin-top: 40px; } .top_vshort { margin-top: 20px; } /* 下にマージンを空ける ----------------------------------------------- */ .bottom_long { margin-bottom: 120px; } .bottom_middle { margin-bottom: 80px; } .bottom_short { margin-bottom: 40px; } .bottom_vshort { margin-bottom: 20px; } /* 両方にマージンを空ける ----------------------------------------------- */ .both_long { margin-top: 120px; margin-bottom: 120px; } .both_middle { margin-top: 80px; margin-bottom: 80px; } .both_short { margin-top: 40px; margin-bottom: 40px; } .both_vshort { margin-top: 20px; margin-bottom: 20px; } } /* SP設定 ----------------------------------------------- */ @media (max-width: 767px) { /* 上にマージンを空ける ----------------------------------------------- */ .top_long { margin-top: 16vw; } .top_middle { margin-top: 12vw; } .top_short { margin-top: 8vw; } .top_vshort { margin-top: 4vw; } /* 下にマージンを空ける ----------------------------------------------- */ .bottom_long { margin-bottom: 16vw; } .bottom_middle { margin-bottom: 12vw; } .bottom_short { margin-bottom: 8vw; } .bottom_vshort { margin-bottom: 4vw; } /* 両方にマージンを空ける ----------------------------------------------- */ .both_long { margin-top: 16vw; margin-bottom: 16vw; } .both_middle { margin-top: 12vw; margin-bottom: 12vw; } .both_short { margin-top: 8vw; margin-bottom: 8vw; } .both_vshort { margin-top: 4vw; margin-bottom: 4vw; } } /* ================================================================================ パディングボックス ================================================================================ */ /* PC設定 ----------------------------------------------- */ @media (min-width: 768px) { /* 上にパディングを空ける ----------------------------------------------- */ .p_top_long { padding-top: 120px; } .p_top_middle { padding-top: 80px; } .p_top_short { padding-top: 40px; } .p_top_vshort { padding-top: 20px; } /* 下にパディングを空ける ----------------------------------------------- */ .p_bottom_long { padding-bottom: 120px; } .p_bottom_middle { padding-bottom: 80px; } .p_bottom_short { padding-bottom: 40px; } .p_bottom_vshort { padding-bottom: 20px; } /* 両方にパディングを空ける ----------------------------------------------- */ .row_long { padding-top: 120px; padding-bottom: 120px; } .row_middle { padding-top: 80px; padding-bottom: 80px; } .row_short { padding-top: 40px; padding-bottom: 40px; } .row_vshort { padding-top: 20px; padding-bottom: 20px; } } /* SP設定 ----------------------------------------------- */ @media (max-width: 767px) { /* 上にパディングを空ける ----------------------------------------------- */ .p_top_long { padding-top: 16vw; } .p_top_middle { padding-top: 12vw; } .p_top_short { padding-top: 8vw; } .p_top_vshort { padding-top: 4vw; } /* 下にパディングを空ける ----------------------------------------------- */ .p_bottom_long { padding-bottom: 16vw; } .p_bottom_middle { padding-bottom: 12vw; } .p_bottom_short { padding-bottom: 8vw; } .p_bottom_vshort { padding-bottom: 4vw; } /* 両方にパディングを空ける ----------------------------------------------- */ .row_long { padding-top: 16vw; padding-bottom: 16vw; } .row_middle { padding-top: 12vw; padding-bottom: 12vw; } .row_short { padding-top: 8vw; padding-bottom: 8vw; } .row_vshort { padding-top: 4vw; padding-bottom: 4vw; } /* 背景色を伸ばす ----------------------------------------------- */ .row_sp { padding-left: 4vw !important; padding-right: 4vw !important; } } /* ================================================================================ カラーボックス ================================================================================ */ /* PC設定 ----------------------------------------------- */ @media (min-width: 768px) { /* カラー01 */ .row_c01 { background: url(../img/spacer.gif) center top / auto auto repeat ,#f2f2f2; } /* カラー02 */ .row_c02 { background: url(../img/spacer.gif) center top / auto auto repeat ,#eeeeee; } /* ボーダー囲い */ .box_border { padding: 40px; border: 8px solid #cccccc; } /* 画像のボーダー囲い */ .img_border img { border: 8px solid #cccccc; } } /* SP設定 ----------------------------------------------- */ @media (max-width: 767px) { /* カラー01 */ .row_c01 { background: url(../img/spacer.gif) center top / auto auto repeat ,#f2f2f2; padding-left: 4vw; padding-right: 4vw; } /* カラー02 */ .row_c02 { background: url(../img/spacer.gif) center top / auto auto repeat ,#eeeeee; padding-left: 4vw; padding-right: 4vw; } /* ボーダー囲い */ .box_border { padding: 4vw; border: 2vw solid #cccccc; } /* 画像のボーダー囲い */ .img_border img { border: 2vw solid #cccccc; } } /* ================================================================================ 見出し ================================================================================ */ /* PC設定 ----------------------------------------------- */ @media (min-width: 768px) { /* h2見出し ----------------------------------------------- */ .h2_cate { border-bottom: 3px solid #d7d7d7; padding: 0 0 16px 0 !important; } .h2_cate h2 { font-size: 32px; font-weight: 500; text-align: center; color: #222; } /* h3見出し ----------------------------------------------- */ .h3_cate { border-bottom: 1px solid #000000; padding: 0 0 12px 0 !important; } .h3_cate h3 { font-size: 26px; font-weight: 500; text-align: center; } } /* SP設定 ----------------------------------------------- */ @media (max-width: 767px) { /* h2見出し ----------------------------------------------- */ .h2_cate { border-bottom: 3px solid #000000; padding: 0 0 2vw 0 !important; } .h2_cate h2 { font-size: 5.5vw; font-weight: 500; line-height: 1.4 !important; text-align: center; } /* h3見出し ----------------------------------------------- */ .h3_cate { border-bottom: 1px solid #000000; padding: 0 0 1.5vw 0 !important; } .h3_cate h3 { font-size: 4.5vw; font-weight: 500; line-height: 1.4 !important; text-align: center; } } /* ================================================================================ 共通ボタン ================================================================================ */ /* PC設定 ----------------------------------------------- */ @media (min-width: 768px) { /* リンク ----------------------------------------------- */ .link_common { margin-top: 40px; } .link_common ul { font-size: 0; letter-spacing: -0.4em; text-align: center; } .link_common ul li { display: inline-block; font-size: 24px; letter-spacing: 0; margin-left: 20px; } .link_common ul li:first-of-type { margin-left: 0; } .link_common ul li a { position: relative; display: block; background-color: #666666; color: #ffffff; letter-spacing: 0.05em; text-indent: 0.05em; line-height: 1.3; padding: 0.8em 4em 0.9em; } .link_common ul li a::after { position: absolute; content: ""; display: block; background: url(../img/arrow.png) center top / contain no-repeat; width: 10px; height: 15px; top: 50%; margin-top: -7px; right: 16px; } } /* SP設定 ----------------------------------------------- */ @media (max-width: 767px) { /* リンク ----------------------------------------------- */ .link_common { margin-top: 6vw; } .link_common ul { text-align: center; } .link_common ul li { display: block; font-size: 4vw; } .link_common ul li { margin-top: 2vw; } .link_common ul li:first-of-type { margin-top: 0; } .link_common ul li a { position: relative; display: block; width: 80vw; background-color: #666666; color: #ffffff; letter-spacing: 0.05em; text-indent: 0.05em; line-height: 1.3; padding: 0.8em 0 0.9em; margin-left: auto; margin-right: auto; } .link_common ul li a::after { position: absolute; content: ""; display: block; background: url(../img/arrow.png) center top / contain no-repeat; width: 2vw; height: 3vw; top: 50%; margin-top: -1.5vw; right: 3vw; } } /* ★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★ ここから各固定ページ ★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★ */ /* ================================================================================ 〇〇ページ ================================================================================ */ /* PC設定 ----------------------------------------------- */ @media (min-width: 768px) { .main_cate{ ackground-size: 100%; padding: 1vw 0 1vw; text-align: center; background-color: #ba2636; } .main_cate_in p{ font-size: 19px; font-weight: 100; color: #FFF; letter-spacing: 5px; } .defo_navigation { position: fixed; text-align: right; right: 0; width: 100vw; background: #FFF; box-shadow: 0px 10px 10px -6px rgba(0, 0, 0, 0.1); } .defo_navigation ul { width: 94vw; margin-right: 4vw; margin-top: 1vw; margin-bottom: 1vw; } .defo_navigation a { color: #474747; font-size: 1.2vw; padding: 0 1.5vw; } .cate_body{ width: 1000px; margin:0 auto; } .cate_title_setsumei{ font-size: 1vw; text-align:center; color: #FFF; } .cate_defo_h2{ } .cate_defo_h2 h2{ font-size: 50px; font-weight: 600; text-align: center; font-family: 'Josefin Sans', sans-serif; letter-spacing: 4px; } .cate_defo_h2 h2:first-letter{ color:#4aa30f; } .cate_defo_h3{ font-size:16px; text-align: center; } h4.komidashi { border-bottom: solid 3px #e3e3e3; position: relative; font-size: 32px; margin-top: 26px; } h4.komidashi:after { position: absolute; content: " "; display: block; border-bottom: solid 3px #49bc39; bottom: -3px; width: 30%; } .cate_defo_midashi{ font-size: 41px; color: #e8652b; font-weight: 600; } .cate_defo_text{ font-size: 18px; color: #222; margin-top: 20px; line-height: 1.9; padding-bottom: 32px; } .center{ text-align:center; } .mokuteki{ font-size: 18px; color: #7c6e66; text-align: center; } .s_list_base a{ padding: 8px; text-align: left; width: 800px; margin: 0 auto; border: 1px solid #65bbb2; border-bottom: 5px solid #65bbb2; text-align: center; background:#FFF; } .s_list_basea a:hover{ padding: 8px; text-align: left; width: 800px; margin: 0 auto; border: 1px solid #65bbb2; border-bottom: 5px solid #65bbb2; text-align: center; background:#a2e5df; } .sevice_hosoku{ font-size:11px; text-align:left; } .s_list_base h2{ font-size: 29px; padding-bottom: 14px; display:block; } .s_midashi_min_gr{ text-align: left; font-size: 14px; color: #65bbb2; } } /* SP設定 ----------------------------------------------- */ @media (max-width: 767px) { .main_cate{ ackground-size: 100%; padding: 1vw 0 1vw; text-align: center; background-color: #ba2636; } .main_cate_in p{ font-size: 3vw; font-weight: 100; color: #FFF; letter-spacing: 5px; padding: 1vw; } .blog_wrap_single ul{ border: 1px solid #DCDCDC; padding: 30px; width: 93vw; margin: 5vw auto 0; background: #FFF; } } /* ================================================================================ 〇〇ページ ================================================================================ */ /* PC設定 ----------------------------------------------- */ @media (min-width: 768px) { .o_pics{ width:380px; } .o_pics img{ width: 430px !important; } .o_name{ color: #65bbb2 font-size: 34px; padding-bottom: 10px; } .o_text{ font-size:16px; color:#666; margin-bottom: 23px !important; } .o_profile{ font-size: 16px; color: #65bbb2; padding-bottom: 10px; border-bottom: 1px solid; margin-bottom: 10px !important; } .o_name_en{ font-size: 12px; color: #65bbb2; letter-spacing: 3px; padding-bottom: 23px; } .owner_base{ margin-bottom:30px; } } /* SP設定 ----------------------------------------------- */ @media (max-width: 767px) { } /* ================================================================================ 〇〇ページ ================================================================================ */ /* PC設定 ----------------------------------------------- */ @media (min-width: 768px) { .s_midashi_min{ text-align:center; font-size:14px; color:#65bbb2; } .s_midashi{ font-size: 39px; color: #65bbb2; text-align: center; padding: 18px; } .s_01_message{ font-size: 21px; text-align: center !important; padding: 20px; } } /* SP設定 ----------------------------------------------- */ @media (max-width: 767px) { } /* ================================================================================ 〇〇ページ ================================================================================ */ /* PC設定 ----------------------------------------------- */ @media (min-width: 768px) { .tate{ -ms-writing-mode: tb-rl; writing-mode: vertical-rl; } .s_tate01{ positionabsolute; right:0; margin-top: 18px; background:url(../img/s_bird.png)right top no-repeat; background-size: 70%; } .s_tate02{ positionabsolute; right:0; margin-top: 18px; background:url(../img/s_bird02.png)right top no-repeat; background-size: 70%; } .marumoji{ font-family: "kiwi-maru", sans-serif; font-weight: 500; font-style: normal; color:#65bbb2; font-size:20px; margin-bottom:30px; } .spics{ margin-top:50px; } .yoyaku_base{ width:900px; margin:0 auto; } .yoyaku_komoku{ padding: 10px; border: 0px solid; background: #E3F1F1; margin: 19px; } } /* SP設定 ----------------------------------------------- */ @media (max-width: 767px) { } /* ================================================================================ 〇〇ページ ================================================================================ */ /* PC設定 ----------------------------------------------- */ @media (min-width: 768px) { .yoyaku{ margin: 22px 0 0 0; } .yoyaku a{ } .sdgs_base{ text-align:left; } } /* SP設定 ----------------------------------------------- */ @media (max-width: 767px) { .sdgs_base{ tex-align:left!important; } } /* .page-container ---------------------------------------------------------------------------*/ .page-container .logo img { position: absolute; } .page-container h2 { margin-top: 0px; font-size: 17px; color: #937878; } .page-container h2 small { font-size: 12px; letter-spacing: .18em; padding-right: 1px; margin-bottom: 22px; } .inner-container { margin-left: 60px; margin-right: -50px; width: 500px; margin-top: 75px; } .inner-container p { margin-bottom: 13px; letter-spacing: .07em; line-height: 1.9; font-size: 15px; } /* sec01 ------------------------------------*/ .sec01 { margin-top: 0; padding-top: 70px; margin-bottom: 70px; } .sec01 .logo img { width: 81px; height: 81px; bottom: 75px; left: -50px; } .sec01 dl { font-size: 14px; line-height: 1.76; letter-spacing: .1em; margin-top: 30px; } .sec01 dl div { display: flex; border-top: solid 1px #E5DFC1; } .sec01 dl div:last-of-type { border-bottom: solid 1px #E5DFC1; } .sec01 dl div dt { display: inline-block; width: 72px; color: #EF848C; background: #FFF8F8; padding: 20px 20px 20px 16px; white-space: nowrap; font-size: 19px; } .sec01 dl div dt span { letter-spacing: .05em; } .sec01 dl div dd { letter-spacing: .065em; padding: 20px 0 20px 24px; width: 430px; } .service_base,.service_biko_shosai,.service_biko{ border-top: solid 0px !important; border-bottom: solid 0px!important; } .service_base{ padding:8px 18px; border:1px solid #DCDCDC; display:block!important; display: block !important; margin: 11px 0; width: 430px; } .service_biko{ font-size:16px; color:#DB8D8D; } .message_se{ border:0px!inportant; font-size: 14px; width: 300px; margin: 40px 0 0 64px; } .message_se2{ border:0px!inportant; font-size: 14px; width: 300px; margin: 10px 0 0 64px; } .message_se3{ border:0px!inportant; font-size: 14px; margin: 0px 0 0 64px; } .pink{ color:#f16565; } .defo_button{ border:0!important; } .defo_button a{ background-color: #e96b33; display: block; padding: 10px 10px; border-radius: 100vh; color:#FFF; text-align:center; } .owner_case_btn{ text-align:center; } .owner_case_btn a{ margin: 0 auto; }