★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★ */ /* ================================================================================ レイアウト ================================================================================ */ /* PC設定 ----------------------------------------------- */ @media (min-width: 768px) { #wrapper{ } main.outer_wrap { position: relative; max-width: none; /* max-width: 1920px; 固定幅レイアウト時 */ width: 100%; min-height: 50vh; display: block; padding: 80px 0; margin: 0 auto; } .inner_wrap { position: relative; width: 100%; margin: 0 auto; } } /* SP設定 ----------------------------------------------- */ @media (max-width: 767px) { #wrapper { } main.outer_wrap { position: relative; width: 100%; min-height: 50vh; padding: 12vw 0; } .inner_wrap { position: relative; width: 100%; padding: 0 4vw; } } /* ================================================================================ マージンボックス ================================================================================ */ /* 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 ,#f8e7e0; } /* カラー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 ,#f8e7e0; 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 #65bbb2; padding: 0 0 16px 0 !important; } .h2_cate h2 { font-size: 32px; font-weight: 500; text-align: center; } /* 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{ background: url(../img/cate_main.jpg)center top no-repeat; background-size: auto; background-size: 100%; padding: 10vw 0 7vw; text-align: center; } .main_cate_in p{ font-size: 2.3vw; font-weight: 900; 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: #65bbb2; font-weight: 600; } .cate_defo_text{ font-size: 18px; color: #65bbb2; margin-top: 20px; line-height: 1.9; padding-bottom: 32px; } .center{ text-align:center; } .mokuteki{ font-size: 18px; color: #7c6e66; text-align: center; } } /* SP設定 ----------------------------------------------- */ @media (max-width: 767px) { .main_cate{ background: url(../img/cate_main.jpg)center top no-repeat; background-size: auto; background-size: 100%; padding: 10vw 0 7vw; text-align: center; } .main_cate_in p{ font-size: 2.3vw; font-weight: 900; 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: #65bbb2; font-weight: 600; } .cate_defo_text{ font-size: 18px; color: #65bbb2; margin-top: 20px; line-height: 1.9; padding-bottom: 32px; } .center{ text-align:center; } .mokuteki{ font-size: 18px; color: #7c6e66; text-align: center; } } /* ================================================================================ 〇〇ページ ================================================================================ */ /* 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) { .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; } } /* ================================================================================ 〇〇ページ ================================================================================ */ /* 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) { .s_midashi_min{ text-align:center; font-size:14px; color:#65bbb2; } .s_midashi{ font-size: 9vw; color: #65bbb2; text-align: center; padding: 0vw 0vw 8vw; } .s_01_message{ font-size: 21px; text-align: center !important; padding: 20px; } .setsumei_midashi{ padding: 8vw 0vw 0vw; font-size: 6vw; color: #777; } } /* ================================================================================ 〇〇ページ ================================================================================ */ /* PC設定 ----------------------------------------------- */ @media (min-width: 768px) { .tate{ -ms-writing-mode: tb-rl; writing-mode: vertical-rl; } .s_tate01{ positionabsolute; right:0; } .marumoji{ font-family: "kiwi-maru", sans-serif; font-weight: 500; font-style: normal; color:#65bbb2; font-size:20px; } } /* SP設定 ----------------------------------------------- */ @media (max-width: 767px) { .tate{ } .s_tate01{ positionabsolute; right:0; } .marumoji{ font-family: "kiwi-maru", sans-serif; font-weight: 500; font-style: normal; color:#65bbb2; font-size:20px; } .sec01{ width: 90vw!important; } } /* ================================================================================ 〇〇ページ ================================================================================ */ /* PC設定 ----------------------------------------------- */ @media (min-width: 768px) { .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: -80px; 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: 233px; 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: 500px; } .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: 642px; } .service_biko{ font-size:16px; color:#DB8D8D; } .message_se{ border:0px!inportant; background: #F2EBE6; padding: 10px; font-size: 14px; width: 300px; } .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; } .mini_top_link a{ border:0px!important; position:relative; } .mini_top_link a:before{ content: ''; border: 0; border-top: solid 2px #cccccc; border-right: solid 2px #cccccc; display: inline-block; width: 10px; height: 10px; transform: translateY(-50%) rotate(45deg); position: absolute; margin: 16px 0 0 -25px; } .mini_top_link a{ padding: 5px 5px!important; font-size:18px!important; color:#65bbb2; margin: 0 0 0 22px; } .mini_top_link{ text-align:left; } } /* SP設定 ----------------------------------------------- */ @media (max-width: 767px) { .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 { width: 90vw; } .inner-container p { margin-bottom: 13px; letter-spacing: .07em; line-height: 1.9; font-size: 15px; } /* sec01 ------------------------------------*/ .sec01 { margin-top: -80px; 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: block; border-top: solid 1px #E5DFC1; } .sec01 dl div:last-of-type { border-bottom: solid 1px #E5DFC1; } .sec01 dl div dt { display: inline-block; width: 90vw; 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: 78vw; } .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: 76vw; } .service_biko{ font-size:16px; color:#DB8D8D; } .message_se{ border:0px!inportant; background: #F2EBE6; padding: 10px; font-size: 14px; width: 300px; } .pink{ color:#65bbb2; } .defo_button{ border:0!important; } .defo_button a{ background-color: #65bbb2; 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; } .mini_top_link a{ border:0px!important; position:relative; } .mini_top_link a:before{ content: ''; border: 0; border-top: solid 2px #cccccc; border-right: solid 2px #cccccc; display: inline-block; width: 10px; height: 10px; transform: translateY(-50%) rotate(45deg); position: absolute; margin: 16px 0 0 -25px; } .mini_top_link a{ padding: 5px 5px!important; font-size:18px!important; color:#65bbb2; margin: 0 0 0 22px; } .mini_top_link{ text-align:left; } } /* PC設定 ----------------------------------------------- */ @media (min-width: 768px) { .top03{ background:url(../img/)center top no-repeat; color:#000; } .top_03_en_midashi{ font-family: 'Josefin Sans', sans-serif; font-size: 90px; color: #121212; font-weight: 500; } .top_03_en_midashi{ font-family: 'Josefin Sans', sans-serif; font-size: 120px; color: #121212; font-weight: 500; line-height: 1; } .top_03_en_midashi:first-letter{ color:#0cbc03; } .top_03_midashi_text{ } .top_team01{ } .top_team01_midashi{ width: 300px; margin: 30px 0 0 560px; position: absolute; font-size: 34px; letter-spacing: 5px; color: #000; font-weight: 100; } .top_team01_text{ font-family: 'Klee One', cursive; width: 274px; margin: 95px 0 0px 561px; position: absolute; font-size: 22px; letter-spacing: 2px; font-weight: 600; } .top_team01_text02{ margin: 180px 0 0 563px; position: absolute; font-family: 'Noto Serif JP','游明朝',YuMincho,'ヒラギノ明朝 ProN W2','Hiragino Mincho ProN','HG明朝B',serif; font-size: 14px; font-weight: 100; } .top_team01{ } .top_team01_photoa{ } .top_team01_photoa img{ transform: rotate( -10deg ); border: 9px solid #FFF; background-color: #fff; filter: drop-shadow(-2px 0px 18px rgba(0,0,0,0.2)); width: 340px; margin: -49px 0 95px 76px; } .top_team01_photoa{ } .top_team01_photob img{ transform: rotate( 10deg ); border: 9px solid #FFF; background-color: #fff; filter: drop-shadow(-2px 0px 18px rgba(0,0,0,0.2)); width: 340px; margin: -173px 0 95px 175px; } .top01_photo01_person01{ margin-top: -310px; position: absolute; } .top01_photo01_person01 img{ position: absolute; width: 80px; margin: 13px 0 0 16px; } .top01_photo01_person02{ margin-top: -310px; position: absolute; } .top01_photo01_person02 img{ position: absolute; width: 80px; margin: 13px 0 0 107px; } .top_team02{ height: 400px; } .top_team02_midashi{ width: 300px; margin: -17px 0 0 226px; position: absolute; font-size: 34px; letter-spacing: 5px; color: #000; font-weight: 100; } .top_team02_text{ font-family: 'Klee One', cursive; width: 274px; margin: 49px 0 0px 226px; position: absolute; font-size: 22px; letter-spacing: 2px; font-weight: 600; } .top_team02_text01{ margin: 134px 0 0 226px; position: absolute; font-family: 'Noto Serif JP','游明朝',YuMincho,'ヒラギノ明朝 ProN W2','Hiragino Mincho ProN','HG明朝B',serif; font-size: 14px; font-weight: 100; } .top_team02{ } .top_team02_photoa{ } .top_team02_photoa img{ transform: rotate( 0deg ); border: 9px solid #FFF; background-color: #fff; filter: drop-shadow(-2px 0px 18px rgba(0,0,0,0.2)); width: 400px; margin: -49px 0 95px 572px; } .top03_photo01_person02{ margin-top: -310px; position: absolute; } .top03_photo01_person02 img{ position: absolute; width: 80px; margin: -70px 0 0 1001px; } .top03{ margin-top: 98px; margin-bottom: 98px; } .top_team03_midashi{ width: 300px; margin: -6px 0 0 560px; position: absolute; color: #000; font-weight: 100; font-size: 34px; letter-spacing: 5px; } .top_team03_text{ font-family: 'Klee One', cursive; width: 274px; margin: 60px 0 0px 561px; position: absolute; font-size: 22px; letter-spacing: 2px; font-weight: 600; } .top_team03_text02{ margin: 146px 0 0 563px; position: absolute; font-family: 'Noto Serif JP','游明朝',YuMincho,'ヒラギノ明朝 ProN W2','Hiragino Mincho ProN','HG明朝B',serif; font-size: 14px; font-weight: 100; } .top_team03{ margin: -37px 0 0 0; } .top_team03_photoa{ } .top_team03_photoa img{ transform: rotate( -10deg ); border: 9px solid #FFF; background-color: #fff; filter: drop-shadow(-2px 0px 18px rgba(0,0,0,0.2)); width: 400px; margin: -49px 0 95px 102px; } .top_team03_photoa{ } .top_team03_photob img{ transform: rotate( 10deg ); border: 4px solid #FFF; background-color: #fff; filter: drop-shadow(-2px 0px 18px rgba(0,0,0,0.2)); width: 400px; margin: -173px 0 95px 175px; } .top_team03_photoa{ } .top03_btn a{ display: block; padding: 18px 30px; background: #49a329; border: 0px solid #333; color: #fff; width: 320px; text-align: center; font-size: 20px; margin:0 auto; } .dami{ background:url(../img/hori.jpg)center top no-repeat; background-size:100%; } .staff01{ background:url(../img/member01.jpg)center top no-repeat; background-size:100%; } .staff02{ background:url(../img/member02.jpg)center top no-repeat; background-size:100%; } .staff03{ background:url(../img/member03.jpg)center top no-repeat; background-size:100%; } .staff00{ background:url(../img/member00.jpg)center top no-repeat; background-size:100%; } .frame > :first-child { border-radius: 2px; -webkit-box-shadow: 0 .5rem 4rem 0 rgba(0,0,0,.1); box-shadow: 0 .5rem 4rem 0 rgba(0,0,0,.1); } .dami a{ display:block; width:100%; height:auto; color:#000; background-color:rgba(255,255,255,0.9); position: relative; margin-top: 301px; text-align: left; } .dami a:hover{ background-color:rgba(255,255,255,0.9); text-align: left; } .staff_name{ padding: 0px 10px 10px; font-size:12px; letter-spacing:3px; } .staff_name a{ color:#000; } .staff_ka{ padding:10px 10px 3px; } .staff_kanname{ padding:0 10px 10px; margin-top:-11px; } .slick-slide img { display: block; width: 93%; } figure { margin: 0; } .top04{ margin-top: 60px; padding: 51px 0; margin-bottom: 0px; height: 555px; } .first_green::first-letter { } .top04_omidashi { font-family: 'Averia Serif Libre', cursive; font-size: 53px; color: #474343; font-weight: 500; line-height: 1; width: 30%; margin: 4vw auto 0; padding-left: 0; position: absolute; text-align: center; } .top04_omidashi2{ font-size: 20px; color: #474343; font-weight: 500; width: 31%; text-align: center; margin: 8vw 0 0 0; position: absolute; } .top04_omidashi:first-letter{ } .top05 img{ width:94%; } .pic06{ } .top06 img{ width:100%; } .service{ width: 100%; margin: 84px auto 00; background: #FFF; padding: 80px 0 90px; } .service ul{ width: 1000px; margin: 0 auto 24px; } .service li{ display: inline-block; width: calc(100% / 3.03); padding: 15px; } .orange{ text-align:center; } .orange a{ display:block; border-radius: 4px; border:3px solid #8a8a8a; padding:10px 20px; font-size: 21px; } .orange_mini{ color:#8a8a8a; font-size:14px; } .orange_text{ color:#8a8a8a; } .green{ text-align:center; } .green a{ display:block; border-radius: 4px; border:3px solid #8a8a8a; padding:10px 20px; } .green_mini{ color:#8a8a8a; font-size:14px; } .green_text{ color:#8a8a8a; font-size: 21px; } } /* SP設定 ----------------------------------------------- */ @media (max-width: 767px) { .top03{ background:url(../img/)center top no-repeat; color:#000; } .top_03_en_midashi{ font-family: 'Josefin Sans', sans-serif; font-size: 90px; color: #121212; font-weight: 500; } .top_03_en_midashi{ font-family: 'Josefin Sans', sans-serif; font-size: 23vw; color: #121212; font-weight: 500; line-height: 1; margin-right: 2vw; } .top_03_en_midashi:first-letter{ color:#0cbc03; } .top_03_midashi_text{ } .top_team01{ } .top_team01_midashi{ width: 90vw; margin: 5vw 0 0 6vw; font-size: 10vw; letter-spacing: 5px; color: #000; font-weight: 100; } .top_team01_text{ font-family: 'Klee One', cursive; width: 90vw; margin: 0 0 0px 3vw; font-size: 4vw; letter-spacing: 2px; font-weight: 600; } .top_team01_text02{ margin: 3vw 0 5vw 3vw; position: relative; font-family: 'Noto Serif JP','游明朝',YuMincho,'ヒラギノ明朝 ProN W2','Hiragino Mincho ProN','HG明朝B',serif; font-size: 3.8vw; font-weight: 100; } .top_team01{ } .top_team01_photoa{ } .top_team01_photoa img{ transform: rotate( 12deg ); border: 9px solid #FFF; background-color: #fff; filter: drop-shadow(-2px 0px 18px rgba(0,0,0,0.2)); width: 70vw; margin: 10vw 0 27vw 22vw; } .top_team01_photoa{ } .top_team01_photob img{ transform: rotate( -14deg ); border: 9px solid #FFF; background-color: #fff; filter: drop-shadow(-2px 0px 18px rgba(0,0,0,0.2)); width: 70vw; margin: -32vw 0 22vw 33vw; } .top01_photo01_person01{ margin-top: -83vw; position: absolute; } .top01_photo01_person01 img{ position: absolute; width: 80px; margin: 13px 0 0 16px; } .top01_photo01_person02{ margin-top: -83vw; position: absolute; } .top01_photo01_person02 img{ position: absolute; width: 80px; margin: 13px 0 0 107px; } .top_team02{ height: 400px; } .top_team02_midashi{ width: auto; margin: 0 0 0 55vw; font-size: 11vw; letter-spacing: 5px; color: #000; font-weight: 100; } .top_team02_text{ font-family: 'Klee One', cursive; width: auto; margin: 0 6vw 7vw 0; font-size: 5vw; letter-spacing: 2px; font-weight: 600; text-align: right; } .top_team02_text01{ margin: -5vw 5vw 7vw 4vw; position: relative; font-family: 'Noto Serif JP','游明朝',YuMincho,'ヒラギノ明朝 ProN W2','Hiragino Mincho ProN','HG明朝B',serif; font-size: 3.8vw; font-weight: 100; text-align: right; } .top_team02{ } .top_team02_photoa{ } .top_team02_photoa img{ transform: rotate( 0deg ); border: 9px solid #FFF; background-color: #fff; filter: drop-shadow(-2px 0px 18px rgba(0,0,0,0.2)); width: 90vw; margin: 0 0 95px 0; } .top03_photo01_person02{ margin-top: -310px; position: absolute; } .top03_photo01_person02 img{ position: absolute; width: 80px; margin: -70px 0 0 1001px; } .top03{ margin-top: 23vw; margin-bottom: 0; } .top_team03_midashi{ width: auto; margin: 37vw 0 0 4vw; color: #000; font-weight: 100; font-size: 11vw; letter-spacing: 5px; } .top_team03_text{ font-family: 'Klee One', cursive; width: auto; margin: 2vw 0 0px 5vw; font-size: 5vw; letter-spacing: 2px; font-weight: 600; } .top_team03_text02{ margin: 3vw 0 0 5vw; font-family: 'Noto Serif JP','游明朝',YuMincho,'ヒラギノ明朝 ProN W2','Hiragino Mincho ProN','HG明朝B',serif; font-size: 3.8vw; font-weight: 100; } .top_03_midashi_text{ font-size: 4.3vw; margin-right: 4vw; } .top_team03{ margin: 14vw 0 0 0; } .top_team03_photoa{ } .top_team03_photoa img{ transform: rotate( -10deg ); border: 9px solid #FFF; background-color: #fff; filter: drop-shadow(-2px 0px 18px rgba(0,0,0,0.2)); width: 84vw; margin: -7vw 0 16vw 7vw; } .top_team03_photoa{ } .top_team03_photob img{ transform: rotate( 10deg ); border: 4px solid #FFF; background-color: #fff; filter: drop-shadow(-2px 0px 18px rgba(0,0,0,0.2)); width: 400px; margin: -173px 0 95px 175px; } .top_team03_photoa{ } .top03_btn a{ display: block; padding: 18px 30px; background: #49a329; border: 0px solid #333; color: #fff; width: 320px; text-align: center; font-size: 20px; margin:0 auto; } .dami{ background:url(../img/hori.jpg)center top no-repeat; background-size:100%; } .staff01{ background:url(../img/member01.jpg)center top no-repeat; background-size:100%; } .staff02{ background:url(../img/member02.jpg)center top no-repeat; background-size:100%; } .staff03{ background:url(../img/member03.jpg)center top no-repeat; background-size:100%; } .staff00{ background:url(../img/member00.jpg)center top no-repeat; background-size:100%; } .frame > :first-child { border-radius: 2px; -webkit-box-shadow: 0 .5rem 4rem 0 rgba(0,0,0,.1); box-shadow: 0 .5rem 4rem 0 rgba(0,0,0,.1); } .dami a{ display:block; width:100%; height:auto; color:#000; background-color:rgba(255,255,255,0.9); position: relative; margin-top: 301px; text-align: left; } .dami a:hover{ background-color:rgba(255,255,255,0.9); text-align: left; } .staff_name{ padding: 0px 10px 10px; font-size:12px; letter-spacing:3px; } .staff_name a{ color:#000; } .staff_ka{ padding:10px 10px 3px; } .staff_kanname{ padding:0 10px 10px; margin-top:-11px; } .slick-slide img { display: block; width: 100%; } figure { margin: 0; } .top04{ margin-top: 20vw; padding: 14vw 0; margin-bottom: 0; } .first_green::first-letter { color:#0cbc03; } .top04_omidashi { font-family: 'Josefin Sans', sans-serif; font-size: 20vw; color: #121212; font-weight: 500; line-height: 1; width: 98vw; margin: 0 auto; padding-left: 3vw; padding-bottom: 4vw; } .top04_omidashi:first-letter{ color:#0cbc03; } .top05 img{ width: 100%; } .top06{ text-align: center; } .top06 li{ display:inline-block; width: 90vw; } .top06_midashi{ font-size: 7vw; color: #000; font-family: ta-kobe, sans-serif; font-weight: 400; font-style: normal; } .top06_text{ font-size: 4vw; color: #000; font-family: ta-kobe, sans-serif; font-weight: 400; font-style: normal; line-height: 1; margin-bottom: 5vw; } .top07{ padding: 60px 0; } .top07_contents{ width:90vw; margin:0 auto; } .top07_contents li{ display:inline-block; width: ; padding:20px; } .top06 ul{ margin:0 auto; padding:0; } .space_pic{ display:none; } .top04{ margin-top: 12vw; padding: 10vw 0; margin-bottom: 0px; height: 208vw; } .first_green::first-letter { color:#0cbc03; } .top04_omidashi { font-family: 'Averia Serif Libre', cursive; font-size: 53px; color: #474343; font-weight: 500; line-height: 1; width: 30%; margin: 4vw auto 0; padding-left: 0; position: absolute; text-align: center; } .top04_omidashi2{ font-size: 20px; color: #474343; font-weight: 500; width: 31%; text-align: center; margin: 8vw 0 0 0; position: absolute; } .top04_omidashi:first-letter{ } .top05 img{ width:94%; } .pic06{ } .top06 img{ width:100%; } .service{ width: 100%; margin: 0 auto 00; background: #FFF; padding: 8vw 0 8vw; } .service ul{ width: 90vw; margin: 0 auto 24px; } .service li{ display: inline-block; width: calc(100% / 1); padding: 2vw; } .orange{ text-align:center; } .orange a{ display:block; border-radius: 4px; border: 1px solid #8a8a8a; padding:10px 20px; font-size: 21px; } .orange_mini{ color:#8a8a8a; font-size:14px; } .orange_text{ color:#8a8a8a; } .green{ text-align:center; } .green a{ display:block; border-radius: 4px; border: 1px solid #8a8a8a; padding:10px 20px; } .green_mini{ color:#8a8a8a; font-size:14px; } .green_text{ color:#8a8a8a; font-size: 21px; } }