/* =================================================================== CSS information file name : style.css style info : 基本構造（style.css） =================================================================== */ :root { --FJorange: #f8ba69; --FJorange_dark: #D4A46B; --FJblue: #5ec5f2; --FJhover: #666; --Rgrada: linear-gradient(-45deg, #ffcb4d 0%,#f68fa1 100%); } h1,h2,h3{ /*↓文字が太く見えるのを解消↓*/ -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale;} html{ overflow-x : hidden; overflow-y : auto; } html {font-size: 62.5%;} body {background:#FFFFFF; font-size: 1.4rem; line-height:2; color:#333; font-family:Arial, -apple-system, BlinkMacSystemFont, "游ゴシック体", YuGothic, "Yu Gothic M", "游ゴシック Medium", "Yu Gothic Medium", "ヒラギノ角ゴ ProN W3", "Hiragino Kaku Gothic ProN W3", HiraKakuProN-W3, "ヒラギノ角ゴ ProN", "Hiragino Kaku Gothic ProN", "ヒラギノ角ゴ Pro", "Hiragino Kaku Gothic Pro", "メイリオ", Meiryo, Osaka, "ＭＳ Ｐゴシック", "MS PGothic", "Helvetica Neue", HelveticaNeue, Helvetica , "Segoe UI", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji"; } a.text,a:link.text,a:visited.text{color:#5AC5F1; text-decoration:none; } a.text:hover{color:#000; text-decoration:underline;} a{transition:0.3s;} a:link,a:visited{ color:#333;} a:hover{ color:#999; text-decoration:none;} @media only screen and (max-width: 768px) { body{ font-size:1.6rem;} /*body{ font-size:1.6rem;}行間長くする前*/ } .fadeIn { animation-fill-mode:both; animation-duration:5s; animation-name: fadeIn; visibility: visible !important; } .title { animation-delay: 2s; } @keyframes fadeIn { 0% { opacity: 0;} 100% { opacity: 1;} } .fadein_scroll { opacity : 0; transform : translate(0, -40px); transition : all 1500ms; } .fadein_scroll.scrollin { opacity : 1; transform : translate(0, 0); } /* =================================================================== 　共通フレームワーク =================================================================== */ h2, h3{ font-weight:bold; letter-spacing:0.2em;} .dia{ color:#5ec5f2; margin-right:.5em; font-size:60%;} .coming:hover{cursor:default;} .inner { width: 1000px; margin: 0 auto; } .inner:after { content: ""; clear: both; display: block; } /* header */ h1#logo_sp a{ display:none;} #top-head { font-size: 14px; top: -100px; position: absolute; width: 100%; margin: 100px auto 0; padding: 0px 0 0; line-height: 1; z-index: 999; } #top-head a, #top-head { color: #fff; text-decoration: none; background:rgba(255,255,255,0.7); margin-bottom:20px; } #top-head .inner {} #global-nav ul#top_right-nav{ top:0px; right:0px; position:relative; display:flex;justify-content: flex-end; height:44px; margin-bottom:0; } #global-nav ul#top_right-nav li a{ height:44px; display:block; margin-left:10px;} #global-nav ul#top_right-nav li#top_nav_info a { background:url(../common_images/header_info.png) #5ec5f2 no-repeat center calc(50% - 1px); width:116px;} #global-nav ul#top_right-nav li#top_nav_info a:hover { background:url(../common_images/header_info.png) #666 no-repeat center calc(50% - 1px);} #global-nav ul#top_right-nav li#top_nav_contact a { background:url(../common_images/header_contact.png) #5ec5f2 no-repeat center calc(50% - 1px); width:116px;} #global-nav ul#top_right-nav li#top_nav_contact a:hover { background:url(../common_images/header_contact.png) #666 no-repeat center calc(50% - 1px);} #global-nav ul {display: flex; justify-content:space-around ;} #global-nav ul li {text-indent:-99999px; } #global-nav ul#main-nav{ margin-bottom:0;} #global-nav ul li#top_nav_home{ display:none;} #global-nav ul#main-nav li a{ height:37px; display:block; transition:0.3s; margin-top:42px; } #global-nav ul li#top_nav_about a { background:url(../common_images/nav_about.png) no-repeat; width:116px;} #global-nav ul li#top_nav_service a {background:url(../common_images/nav_service.png) no-repeat; width:74px;} #global-nav ul li#top_nav_logo a {background:url(../common_images/nav_logo.png) no-repeat; width:285px; height:95px; margin-top:0;} #global-nav ul li#top_nav_facilities a {background:url(../common_images/nav_facilities.png) no-repeat; width:73px;} #global-nav ul li#top_nav_recruit a {background:url(../common_images/nav_recruit.png) no-repeat; width:74px;} #global-nav ul li a:hover { opacity:0.5;} #global-nav ul li#top_nav_info_sp, #global-nav ul li#top_nav_contact_sp { display:none;} /* Fixed */ #top-head.fixed { margin-top: 0; top: 0; position: fixed; padding-top: 10px; height: 56px; background: rgba(255,255,255,0.7); transition: top 0.65s ease-in; -webkit-transition: top 0.65s ease-in; -moz-transition: top 0.65s ease-in; } #top-head.fixed #global-nav ul#top_right-nav{ display:none;} #top-head.fixed .logo { font-size: 24px; color: #333; } #top-head.fixed #global-nav ul li a { color: #333; padding: 0 20px; margin-top:0; } #top-head.fixed #global-nav ul li#top_nav_logo a{ background-size:contain; width:142px; height:46px; margin-top:-5px;} /* Fixed Btn Hover */ #top-head.fixed #global-nav ul li:after { bottom: -10px; } #top-head.fixed #global-nav ul li:hover:after { background: #0062B8; bottom: -20px; } /* Transition */ /* #top-head, #top-head .logo, #global-nav ul li, #global-nav ul li a { transition: all 0.3s ease; -webkit-transition: all 0.3s ease; -moz-transition: all 0.3s ease; } */ /* Toggle Button */ #nav-toggle { display: none; position: absolute; right: 12px; top: 14px; width: 34px; height: 36px; cursor: pointer; z-index: 101; } #nav-toggle div { position: relative; } #nav-toggle span { display: block; position: absolute; height: 4px; width: 100%; background: #666; left: 0; -webkit-transition: .35s ease-in-out; -moz-transition: .35s ease-in-out; transition: .35s ease-in-out; } #nav-toggle span:nth-child(1) { top: 0; } #nav-toggle span:nth-child(2) { top: 11px; } #nav-toggle span:nth-child(3) { top: 22px; } footer { text-align:center; border-top:#666 1px solid;} footer #footer_wrap{display: flex; width:1000px; margin:0 auto; padding-top:40px;} footer #footer_logo{ /*当初の幅width:38%;*/ width:30%; text-align:left;} footer #footer_logo img{ margin-left:60px;} footer ul{list-style: none; } footer ul#footer_nav{/*当初の幅width: 62%;*/ width: 70%; display: flex; flex-wrap: wrap; justify-content:space-between; } footer ul#footer_nav > li{ /*各面積を確認する時にborder:#000 1px solid;*/ width: 20%; flex-grow:1; text-align:left; white-space: nowrap; font-size:1.3rem;} footer ul#footer_nav .cat li {background:url(../common_images/footer_mark.png) no-repeat center left; padding-left:1em;} footer ul#footer_nav li.catch{ background:none; font-size:1.5rem; font-weight:bold; margin-bottom:1em; padding-left:0; } footer ul#footer_nav li.coming{ color:#ccc;} footer small{ background:#333; width:100%; display:block; padding:15px; color:#fff; margin-top:40px; letter-spacing:0.08em;} .pagetop{ position:fixed; right:0; bottom:0; padding:14px; background:#5EC5F2; color:#fff; line-height:0; z-index:1000;} .pagetop i{color:#fff;} .pagetop:hover{ background:#666; padding:10px 14px 18px 14px; color:#fff;} .btn a { display:block; text-align:center; padding:14px 5px; line-height:0;} .vw{ writing-mode: vertical-rl;} /* 下層ページ共通要素 */ #bread_list{ display:flex; align-items: center; width:1000px; margin:0 auto; font-size:1.2rem; letter-spacing:0.08em; margin-top:20px; padding-left:40px;} #bread_list a{ color:#333;} #bread_list a:hover{ opacity:0.5;} #bread_list li{ margin-right:1px;} #bread_list li+ li::before{ font-family: "Material Icons"; content: "\e5cc"; vertical-align: -0.05em;} article#cat-main-img{margin-top:160px; height:365px; display:flex; align-items: center;} article#cat-main-img h2{ font-size:3.5rem; letter-spacing:0.34em; width:1000px; margin:0 auto; padding:0 40px; line-height:1;text-shadow:#999 0 0 8px;} article#cat-main-img h2 span{ font-size:1.3rem; letter-spacing:0.06em;} #news article#cat-main-img h2{ font-size:3.5rem; letter-spacing:0.34em; width:1000px; margin:0 auto; padding:0 40px; line-height:1;text-shadow:#999 0 0 8px;} #news article#cat-main-img h2 span{ font-size:1.3rem; letter-spacing:0.06em;} @media screen and (max-width: 1024px) { /*article { padding: 0 30px; }*/ .inner { width: 100%; } #global-nav ul li a { padding: 0 20px; } #top-head.fixed #global-nav ul li a { padding: 0 15px; } footer #footer_logo{text-align:center;} footer #footer_logo img{ margin-left:auto;} footer #footer_wrap{width:100%;} footer #footer_logo{ width:27%;} footer ul#footer_nav{width: 72%;} #bread_list{width:100%; } } @media screen and (max-width: 768px) { h1#logo_sp a{ display: block; background:url(../common_images/nav_logo.png) no-repeat 0px 4px; background-size:contain; width:142px; height:54px; text-indent:-99999px; margin:0 auto; } #main-img {} #top-head, .inner { width: 100%; padding: 0; } #top-head { top: 0; position: fixed; margin-top: 0; } #global-nav ul#top_right-nav{ display:none; } #global-nav ul li#info_sp, #global-nav ul li#contact_sp { display: block;} /* Fixed reset */ #top-head.fixed { padding-top: 0; /*background: transparent;*/ } #mobile-head { /*background: rgba(255,255,255,0.5);*/ width: 100%; height: 56px; z-index: 999; position: relative; } #global-nav ul {display: block;} #global-nav ul li { height:auto; text-indent:0;} #global-nav ul li#top_nav_home, #global-nav ul li#top_nav_home a{ background:none; display:block;} #global-nav ul li#top_nav_about a, #global-nav ul li#top_nav_about a:hover { background:none; width:auto;} #global-nav ul li#top_nav_service a, #global-nav ul li#top_nav_service a:hover {background:none; width:auto;} #global-nav ul li#top_nav_logo {background:none; width:auto; display:none;} #global-nav ul li#top_nav_facilities a, #global-nav ul li#top_nav_facilities a:hover {background:none; width:auto;} #global-nav ul li#top_nav_recruit a, #global-nav ul li#top_nav_recruit a:hover {background:none; width:auto;} #global-nav ul li#top_nav_info_sp, #global-nav ul li#top_nav_contact_sp, #global-nav ul li#top_nav_info_sp a, #global-nav ul li#top_nav_contact_sp a {display: block; background:none;} #top-head, #top-head.fixed {background: rgba(255,255,255,0.95);} #top-head.fixed .logo, #top-head .logo { position: absolute; left: 13px; top: 13px; color: #333; font-size: 26px; } #global-nav { position: absolute; /* 開いてないときは画面外に配置 */ top: -500px; background: rgba(255,255,255,0.95); width: 100%; text-align: center; padding: 0; -webkit-transition: .5s ease-in-out; -moz-transition: .5s ease-in-out; transition: .5s ease-in-out; } #global-nav ul { list-style: none; position: static; right: 0; bottom: 0; font-size: 1.6rem; font-weight:bold; } #global-nav ul li { float: none; position: static; } #global-nav ul li:after { display: none; } #top-head #global-nav ul li a, #top-head.fixed #global-nav ul li a { width: 100%; display: block; color: #333; padding: 30px 0; line-height:0; margin:0; vertical-align: middle; } #top-head #global-nav ul li a::before, #top-head.fixed #global-nav ul li a::before { font-family: 'Material Icons'; content: "\e315"; font-weight: 900; font-size:2.4rem; line-height:0; margin:0; padding:0; color:#5ec5f2; vertical-align: middle; display:inline-block; padding-bottom:3px; } #top-head #global-nav ul li a:hover, #top-head.fixed #global-nav ul li a:hover { background:#666; color:#fff; opacity:1; } #nav-toggle { display: block; } /* #nav-toggle 切り替えアニメーション */ .open #nav-toggle span:nth-child(1) { top: 11px; -webkit-transform: rotate(315deg); -moz-transform: rotate(315deg); transform: rotate(315deg); } .open #nav-toggle span:nth-child(2) { width: 0; left: 50%; } .open #nav-toggle span:nth-child(3) { top: 11px; -webkit-transform: rotate(-315deg); -moz-transform: rotate(-315deg); transform: rotate(-315deg); } /* #global-nav スライドアニメーション */ .open #global-nav { /* #global-nav top + #mobile-head height */ -moz-transform: translateY(556px); -webkit-transform: translateY(556px); transform: translateY(556px); } article#cat-main-img{margin-top:0px;} footer ul#footer_nav{ display:none;} footer #footer_logo{ width:100%;} footer small{ height:100px; font-size:1rem;} } /* =================================================================== 　home =================================================================== */ /*#home #main-img { background:url(../images/main_img.jpg) center -1px no-repeat; background-size: cover; width:100%; height: 90vh; }*/ #home #video_wrap{ z-index:-1; width:100%; overflow:hidden;max-height:90vh; margin:0 auto; text-align:center; position: relative; } #home video{ z-index:-1; overflow:hidden; min-width:100vw; min-height:90vh; margin:auto -50%;} /*#home #video_wrap{ width:100%; overflow:hidden;height:90vh; margin:0 auto; text-align:center; position: relative; } #home video{ width:100%;height:90vh; z-index:-1; position: relative; display: inline-block;} #home #video_main_wrap .movie_main { width:100%; }*/ /*動画の上にロゴを挿入時 #home #video_wrap #logo_main{ position: absolute; top: 50%; left: 50%; -webkit-transform: translate(-50%,-50%); -moz-transform: translate(-50%,-50%); -ms-transform: translate(-50%,-50%); -o-transform: translate(-50%,-50%); transform: translate(-50%,-50%);} */ @media only screen and (max-width: 768px) { #home #video_wrap{max-height:auto;} #home video{ min-width:auto; min-height:auto; width:100%; height:auto; margin:auto;padding-top:56px;} /*#home #video_wrap{max-height:600px;} #home #video_wrap #logo_main{top: 42%;}*/ } /*文字も画像時　※768pxにも記述有り#home #read{ margin:0 auto; margin-top:-150px; display:flex; justify-content:center; overflow:hidden; }*/ #home #read{ margin:0 auto; height:150px; margin-top:-150px; background:url(../images/main_catch_bg.png) center top no-repeat; font-size:3rem; font-weight:bold; text-align:center; padding-top:50px; letter-spacing:0.4em;} #home #btn_corp img{ max-width:100%;} #home #btn_corp a { width:182px; background:#5ec5f2; margin:55px auto 0 auto;} #home #btn_corp a:hover { background: #666;} #home section{ width:1000px; margin:0 auto; padding-top:30px;} #home section#con_info{display: flex;} #home h2{ padding:20px; padding-top:0; } #home .cat_title{display:flex; align-items: center; margin-bottom:10px;font-weight:bold; letter-spacing:0.7em;} #home p.catch{ font-size:3rem; line-height:5.4rem; padding-bottom:1.2em;} #home #con_service .cat_title, #home #con_facilities .cat_title{justify-content:center; padding:20px; } #home #con_info{ padding-bottom:70px;} #home #con_info ul{ padding-top:60px; width:740px;} #home #con_info li:first-child{ border-top:#ccc 1px solid;} #home #con_info li{ border-bottom:#ccc 1px solid; } #home #con_info li a{ display:block; padding:1em; text-decoration:none;} #home #con_info li a:hover{ background:#eee; } #home #con_info span{ margin-right:20px;} #home #con_info .date{ color:#5ec5f2;} /*タグhtmlテキスト時 #home #con_info .tag-01, #home #con_info .tag-02, #home #con_info .tag-03{ text-align:center; display:inline-block; width:90px; font-size:1rem; padding:0em 1em;color:#fff; border-radius:4px; background:#000;} #home #con_info .tag-01{background:#FAC88C;} #home #con_info .tag-02{background:#DBB084;} #home #con_info .tag-03{background:#5AC5F2;}*/ #home #con_info li .btn_info{margin:0 20px 2px 0;vertical-align: middle;} #home #con_info p{ display:inline; color:#333; } #home #con_info #btn_list{ padding-top:1em; text-align:right;} #home #con_info #btn_list a, #home #con_info #btn_list a:visited{ text-decoration:underline; padding-top:10px; color:#333;} #home #con_info #btn_list a:hover{ text-decoration:none; opacity:0.5;} #home section#con_service{ width:100%; background:#E8EAEB;} #home #con_service .wrap{display: flex; align-items: center; margin:0 auto; max-width:945px; padding-bottom:100px;} @media all and (-ms-high-contrast:none){ #home #con_service .wrap { align-items:stretch; } /* IE11 上下中央揃いにならないので */ #home #con_service .txt_wrap{ margin-top:30px;} } #home #con_service .txt_wrap{ background:#fff; border-radius:16px; width:400px; padding:30px; position: relative; z-index:1;} #home #con_service .img{ position:absolute; } #home #con_service .txt_right{ margin-left:536px;} #home #con_service img.right{ margin-left:364px;} #home #con_service h3{ font-size:2.4rem; text-align:center; margin-bottom:0.5em; display: inline-block; padding-left:3em; font-weight:bold; letter-spacing:0.2em;} #home #con_service .txt_right, #home #con_service .txt_left{ display:flex; align-items: center; justify-content:center; flex-wrap: wrap;} #home #con_service .txt_right h3{ background:url(../common_images/mark_01.png) no-repeat left center;} #home #con_service .txt_left h3{ background:url(../common_images/mark_02.png) no-repeat left center;} #home #con_service .btn_detail a { background:#f8ba69; width:230px; margin:20px auto;} #home #con_service .btn_detail a:hover { background:#666;} #home #con_service .btn_fujinosato a {background: #D4A46B; width:230px; margin:20px auto; } #home #con_service .btn_fujinosato a:hover { background:#666;} #home section#con_facilities{ width:100%; max-width:1000px;} #home #con_facilities .cat_title h2{order:2;} #home #con_facilities .cat_title p{order:1;} #home #con_facilities ul{display:flex; justify-content:space-around; flex-wrap:wrap; } #home #con_facilities ul::after{/*最後の段を左寄せ*/ content:""; display: block; width:64%;/*本来は30%だが右にずれてしまうので*/ height:0; } #home #con_facilities li{ width:306px; display:flex; align-items:center; justify-content:center; align-content:flex-start; flex-wrap: wrap; margin-bottom:60px;letter-spacing:0.1em;} #home #con_facilities li h3{ display: inline-block; background:url(../common_images/mark_01.png) no-repeat left calc(50% - 5px); background-size:45px; font-size:1.8rem; padding-left:3.2em; margin-top:1em;letter-spacing:0.05em; } #home #con_facilities li h3.aged{background:url(../common_images/mark_02.png) no-repeat left calc(50% - 5px); background-size:45px; } #home #con_facilities li h3 span{ display:block; font-size:1.4rem; line-height:0.8em;} #home #con_facilities li h3.single_line{ line-height:2.8em;} #home #con_facilities li p{ line-height:1.4em; padding-bottom:1em; line-height:1.6em; padding-left:4.1em;} #home #con_facilities li a{ transition:0.3s; line-height:0;} #home #con_facilities li a.coming{ opacity:0.25;} #home #con_facilities li a.coming:hover{ background:#fff;} #home #con_facilities li a:hover{ background:#666;} #home #con_facilities .tel_icon{ font-size:1rem;} #home section#con_recruit { width:100%; background:url(../images/recruit_bg.jpg) no-repeat center center; background-size:cover; margin-top:100px; border-bottom:#E8EAEB 50px solid;} #home section#con_recruit .cat_title{display: block; color:#fff; text-shadow:#666 0 0 8px; margin-top:-100px; padding-bottom:30px; min-height:500px;} #home section#con_recruit h2{ text-align:center;} #home section#con_recruit p.catch{padding:0 0.5em 0.5em 0.5em; display:flex; justify-content:center;} #home #con_recruit .btn_recruit a {background:#A8D176; width:182px; margin:20px auto; } #home #con_recruit .btn_recruit a:hover { background:#666;} @media screen and (max-width: 1024px) { #home #read{ font-size:2.1rem; } #home section{ width:100%;} #home .cat_title{display: block;} #home h2{ text-align:center;} #home p.catch{padding-bottom:0em; display:flex; justify-content:center;} #home section#con_info{display: block;} #home #con_info h2{ padding-top:20px;} #home #con_info ul{ width:100%; padding-top:0;} #home #con_info p{ display: block; } #home #con_info #btn_list{ padding-right:1em;} #home #con_service { padding:10px;} #home #con_service .wrap{display: flex; justify-content:center; flex-wrap: wrap; margin:0 auto; width:100%; padding-bottom:50px;} #home #con_service .txt_wrap{ position: static; width:100%; } #home #con_service .img{ position: static; max-width:100%;} #home #con_service .txt_right{ margin-left:0;} #home #con_service img.right{ margin-left:0;} #home #con_service h3{ margin-left:0;} #home #con_facilities li img{ position: static; max-width:100%;} } @media screen and (max-width: 768px) { #home #read{ margin-top:0px;} #home h2 img{ width:140px; } /*文字も画像時#home #read img { max-width:660px; height:90px; margin-top:60px; }*/ } /* =================================================================== 　about / 私たちについて =================================================================== */ #about article{ background:url(../about/images/main_img.jpg) no-repeat center center;background-size: cover; } #about h2{ color:#fff; } #about section{ margin-bottom:50px;} #about section.bg_gray{ background:#E8EAEB; padding:50px 0;} #about section .contents_wrap{width:800px; margin:0 auto; display:flex; align-items: flex-start;} #about section#read{ overflow:hidden;} #about section#read .contents_wrap{margin-top:50px;} #about h3{ font-size:1.8rem; letter-spacing:0.13em; margin-right:115px; color:#5ec5f2; border-left:#5ec5f2 2px solid; } #about section#read .txt_wrap{ margin-top:30px;} #about h4{ font-size:3.8rem; letter-spacing:0.38em; line-height:71px; margin-bottom:20px;} #about section#read ul{ display:flex; justify-content:space-between; width:1200px; margin:0 auto; padding-left:350px; padding-top:20px; } #about section#read ul img{ max-width:273px;} #about .btn_detail a { background:#5ec5f2; width:230px; margin:20px 0;} #about .btn_detail a:hover { background:#666; } @media screen and (max-width: 1200px) {#about section#read ul{ padding-left:27.5%; max-width:1200px; } } #about section table{ width:710px; border-collapse: collapse; margin:30px 0;} #about section table th{ text-align:left; white-space:nowrap;} #about section table th, #about section table td{ padding:10px 20px; font-weight: normal;} #about section table i{ font-style:normal; background:url(../about/images/icon_pdf.png) no-repeat left 1px; padding:10px; padding-left:2.5em; } #about section table.outline th, #about section table.outline td{border-top:#E8EAEB 1px solid;} #about section table.outline th{ background:#5BC5F1; color:#fff; width:90px;} #about section table.outline td{ background:#fff;} #about section table.history{border-bottom:#C1C1C1 1px dashed;} #about section table.history th, #about section table.history td{border-top:#C1C1C1 1px dashed;} #about section table.history th{ width:90px;} #about section table.info th, #about section table.complaint th, #about section table.info td, #about section table.complaint td{ padding-bottom:50px;} #about section table.info th, #about section table.complaint th{vertical-align:top; width:120px;} #about section table.info th p, #about section table.complaint th p{ width:100%; background:#5BC5F1; color:#fff; padding:2px 20px;} #about section table.info td{ line-height:280%;} #about section table.info .date {background:url(../common_images/footer_mark.png) no-repeat center left; padding-left:1em;} #about section table.complaint .chart{ margin-top:20px;} @media screen and (max-width: 1024px) { #about section .contents_wrap{ width:100%; justify-content:center; align-content:flex-start; flex-wrap: wrap;} #about section .txt_wrap{ width:100%;} #about section{ padding:0 20px;} #about h3{margin-right:0; writing-mode:horizontal-tb; margin-bottom:30px; border-left:none; border-bottom:#5ec5f2 2px solid;} #about section#read ul{ width:100%; padding-left:0;justify-content:center; } #about section#read ul img{ max-width:100%;} #about section table td:last-child { width: 100%; } #about section table { width: 100%; margin:30px auto; } #about section table.outline { width: 90%; } #about section table th, #about section table td { 　　border-bottom: none; display: block; width: 100%; } #about section table.outline th, #about section table.history th, #about section table.info th, #about section table.complaint th{ width:100%;} #about section table.history th{border-top:#C1C1C1 1px solid;} #about section table.history {border-bottom:#C1C1C1 1px solid;} #about section table.info th, #about section table.complaint th{ padding-bottom:0px;} #about section table.info td, #about section table.complaint td{ padding-bottom:20px;} #about section table.complaint .chart{ max-width:100%;} } @media screen and (max-width: 768px) { #about section#read ul{ display:block; text-align:center;} #about h4{ font-size:3rem; } } /* =================================================================== 　service / 事業内容 =================================================================== */ #service article{ background:url(../service/images/main_img.jpg) no-repeat center center;background-size: cover; } #service h2{ color:#fff;} #service section{ margin-bottom:50px;} #service section .contents_wrap{width:800px; margin:0 auto; display:flex; align-items: flex-start;} #service section#read{ overflow:hidden;background:url(../service/images/section_bg.png) no-repeat left bottom; padding-bottom:30px;} #service section#fujinosato{ overflow:hidden;background:url(../service/images/section_bg.png) no-repeat right bottom; padding-bottom:30px;} #service section#read .contents_wrap{margin-top:50px;} #service section#fujinosato .contents_wrap{flex-direction: row-reverse; margin-top:50px;} #service h3{ font-size:3.5rem; letter-spacing:0.34em; margin-right:100px; } #service section#read h3{background:url(../service/images/mark_01.png) no-repeat top center; padding-top:70px; } #service section#fujinosato h3{background:url(../service/images/mark_02.png) no-repeat top center; padding-top:70px; margin:0 0 0 100px;} #service section#read .txt_wrap, #service section#fujinosato .txt_wrap{ margin-top:30px; } #service h4{ font-size:3.8rem; letter-spacing:0.38em; line-height:71px; margin-bottom:20px;} #service section#read ul, #service section#fujinosato ul{ display:flex; justify-content:space-between; width:1200px; margin:0 auto; padding-top:20px; } #service section#read ul{padding-left:380px; margin-top:-20px;} #service section#fujinosato ul { align-items: flex-start; flex-direction: row-reverse; padding-right:360px; margin-top:-120px;} #service section#read li, #service section#fujinosato li{display:flex; align-items:flex-start; flex-wrap: wrap; margin-right:10px;} #service section#fujinosato li{justify-content: flex-end; } @media screen and (max-width: 1220px) { #service section#read ul{ padding-left:32%; max-width:1220px; } #service section#fujinosato ul{ padding-right:40%; max-width:1220px; } } #service .btn_detail{ padding-top:30px;} #service .btn_detail a { background:#f8ba69; width:230px; margin:20px auto;} #service .btn_detail a:hover { background:#666;} #service .btn_fujinosato{ padding-top:30px;} #service .btn_fujinosato a {background: #D4A46B; width:230px; margin:20px auto; } #service .btn_fujinosato a:hover { background:#666;} @media screen and (max-width: 1024px) { #service section .contents_wrap{ width:100%; justify-content:center; align-content:flex-start; flex-wrap: wrap;} #service section .txt_wrap{ width:100%;} #service section{ padding:0 20px;} #service h3, #service section#fujinosato h3{margin:0; writing-mode:horizontal-tb; } #service section#read h3{background:url(../service/images/mark_01.png) no-repeat left center;padding-top:0; padding-left:80px; } #service section#fujinosato h3{background:url(../service/images/mark_02.png) no-repeat left center;padding-top:0; padding-left:80px; margin:0;} #service section#read ul, #service section#fujinosato ul{ width:auto; padding:0; padding-top:20px; justify-content:center; } #service section#read img, #service section#fujinosato img{ max-width:100%;} #service section#read .large, #service section#fujinosato .large{ width:355px;} #service section#read ul, #service section#fujinosato ul{margin-top:0; display:block; text-align:center;} #service section#read li, #service section#fujinosato li{ display:block; text-align:center;} #service .btn_detail, #service .btn_fujinosato{ padding-top:10px;} } @media screen and (max-width: 768px) { #service section#read ul{ padding-left:auto; max-width:100%; } #service section#fujinosato ul{ padding-right:auto; max-width:100%; } } /* =================================================================== 　facilities / 施設紹介 =================================================================== */ #facilities article{ background:url(../facilities/images/main_img.jpg) no-repeat center center;background-size: cover; } #facilities h2{ color:#fff;} #facilities section#read h3{ font-size:3.5rem; letter-spacing:0.36em; margin-right:70px; margin-top:50px; } #facilities section{ margin-bottom:50px;} #facilities section .contents_wrap{width:915px; margin:0 auto; display:flex; align-items: flex-start;} #facilities section#read .txt_wrap{ margin-top:100px;} #facilities section.list{ max-width:1000px; margin:0 auto;} #facilities .list ul{display:flex; justify-content:space-between; flex-wrap:wrap; } #facilities .list ul::after{/*最後の段を左寄せ*/ content:""; display: block; width:50%; height:0; } #facilities .list li{ width:473px; display:flex; align-items:center; justify-content:center; align-content:flex-start; flex-wrap: wrap; margin-bottom:60px;letter-spacing:0.1em;} #facilities .list li h3{ display: inline-block; background:url(../common_images/mark_01.png) no-repeat left 10px; font-size:2.4rem; padding-left:3.2em; margin:1em auto 0.2em auto;letter-spacing:0.16em; line-height:1.4em; } #facilities .list li h3.aged{background:url(../common_images/mark_02.png) no-repeat left calc(50% - 7px); } #facilities .list li h3 span{ display:block; font-size:1.7rem; line-height:1.4em;} #facilities .list li h3.single_line{ line-height:2.8em;} #facilities .list li p{ font-size:1.5rem; padding-bottom:1em; line-height:1.6em; padding-left:5.6em;} #facilities .list li a.address{ transition:0.3s; line-height:0; display:block; margin-top:20px; width:190px; } #facilities .list li a.address:hover{ background:#666;} #facilities .list li a.coming{ opacity:0.25;} #facilities .list li a.coming:hover{background:#fff;} #facilities .list .tel_icon{ font-size:1.2rem;} @media screen and (max-width: 1024px) { #facilities section{ padding:0 20px; } #facilities section .contents_wrap{ width:100%; justify-content:center; align-content:flex-start; flex-wrap: wrap;} #facilities section .txt_wrap{ width:100%;} #facilities section#read .txt_wrap{ margin-top:0;text-align:center;} #facilities section img{ max-width:100%;} #facilities section#read h3{ writing-mode:horizontal-tb; margin:0; padding:40px 0; text-align:left; display:block; width:100%; text-align:left;} #facilities section .list{ width:100%;} #facilities .list ul{justify-content:center; } #facilities .list li{ width:100%;} #facilities .list li .txt_wrap{display:flex;justify-content:center; flex-direction:column; margin-right:0px;} #facilities .list li h3 span{ display:block; font-size:1.7rem; line-height:1.2em; } #facilities .list li p{padding:0px; margin:0 auto;} #facilities .list li img{ position: static; max-width:100%;} } @media screen and (max-width: 768px) { #facilities .list li p{ } #facilities .list li h3, #facilities .list li h3.aged{ padding-left:2.7em; background-position:left 7px; } #facilities .list .tel_icon{ font-size:1.2rem;} } /* =================================================================== 　contact / お問い合わせ =================================================================== */ #contact article{ background:url(../contact/images/main_img.jpg) no-repeat center center;background-size: cover; } #contact h2{ color:#fff;} #contact section#read p{ font-size:1.4rem; letter-spacing:0.06em; text-align:center; margin:45px auto;} #contact i{ color:#5BC5F1; font-style:normal;} #contact table{ width:735px; text-align:left; margin:0 auto; margin-bottom:3rem;} #contact table th{ background:url(../common_images/footer_mark.png) no-repeat left calc(50% + 2px) ; padding-left:1em;} #contact table tr{ border-bottom:#fff 1px solid; display:block;} #contact table tr:last-child{ border:none;} #contact table td{display:block;} #contact table span{color:#5BC5F1; vertical-align: super; margin-left:0.2em;} #contact input::placeholder, #contact textarea::placeholder{ color:#ccc;}/*例*/ #contact input:focus::placeholder, #contact textarea:focus::placeholder {color: transparent;}/*フォーカス時に例を非表示*/ select, input[type="text"], textarea{ width:735px;} #contact .zipcode{width:10rem;} select, input, textarea{ background:#fff; border:#ccc 1px solid; padding:1.5rem; margin:0.5rem 0 2rem 0; border-radius:0; } input[type="image"], button[type="reset"]{background:#5AC5F1; padding:0; margin:0; margin-left:1.5rem; border:none; } button[type="reset"]{background:#ccc;} input[type="image"], button[type="reset"], input[type="image"]::before, button[type="reset"]::before, input[type="image"]::after, button[type="reset"]::after{ animation:ease-out;transition: all .5s ease-out;} input[type="image"]:hover, button[type="reset"]:hover{ background:#666;} #contact #button{ display:flex; justify-content:center; margin:55px 0;} input[type="image"]{padding:1.5rem 5rem 1.5rem 4rem;} #contact button {border:none; /*枠を消す*/width:230px;padding:0.8rem 5rem 0.7rem 4rem;} input[type="checkbox"]{ margin-bottom:0; padding-bottom:0;} #contact .privacy { text-indent:-2em; margin-left:2em;} #contact .privacy a { color:#5AC5F1;} @media only screen and (max-width: 768px) { #contact table{ width:95%; } select, input[type="text"], textarea{ width:100%;} #contact #button{ display: block; text-align:center; } } /* =================================================================== 　recruit / 採用情報 =================================================================== */ /*================= 採用共通 =================*/ /*=======先輩の声=======*/ #recruit #voice_btn_area #voice_btn_nakayama .title_wrap, #recruit #voice_nakayama .title_wrap{ color:#A6D493;} #recruit #voice_btn_area #voice_btn_tada .title_wrap, #recruit #voice_tada .title_wrap{ color:#F6AACB;} #recruit #voice_btn_area #voice_btn_toritani .title_wrap, #recruit #voice_toritani .title_wrap{ color:#5ec5f2;} #recruit #voice_btn_area #voice_btn_nakayama .btn_detail a{ background:#A6D493;} #recruit #voice_btn_area #voice_btn_tada .btn_detail a{ background:#F6AACB;} #recruit #voice_btn_area #voice_btn_toritani .btn_detail a{ background:#5ec5f2;} #recruit #voice_btn_area #voice_btn_nakayama .btn_detail a:hover, #recruit #voice_btn_area #voice_btn_tada .btn_detail a:hover, #recruit #voice_btn_area #voice_btn_toritani .btn_detail a:hover{ background:#666;} #recruit .btn_detail a {width:229px; margin:20px auto;} #recruit #voice_btn_area{ padding-bottom:90px;} #recruit #voice_btn_area .contents_wrap{ width:1000px; margin:0 auto; padding-top:60px; } #recruit #voice_btn_area .mark, #recruit #voice_btn_area .mark_reverse{ margin-bottom:-170px; margin-left:20px; z-index:1; position: relative;} #recruit #voice_btn_area .flex{ display:flex;align-items:flex-end;} #recruit #voice_btn_area .reverse{flex-direction: row-reverse;} #recruit #voice_btn_area .btn_wrap{ margin-right:12px; line-height:0;} #recruit #voice_btn_area .en{ display:block; font-size:1.5rem;} #recruit #voice_btn_area .name{display:block; font-size:2rem; font-weight:bold;} #recruit #voice_btn_area b{ font-size:1.5rem;} #recruit #voice_btn_area .date{display:block; font-size:1.2rem;} #recruit #voice_btn_area .name_wrap{ background:#fff; margin-left:-115px; margin-bottom:-20px; letter-spacing:0.2em; padding:25px; min-height:210px;} #recruit #voice_btn_area #name_wrap_toritani{ margin-left:-135px; } #recruit #voice_btn_area .title_wrap{ background:#fff; z-index:-1; margin-left:-80px; margin-bottom:-20px; font-size:3.5rem; letter-spacing:0.34em; padding:40px 65px; min-height:500px; font-weight:bold;} #recruit #voice_btn_area .mark_reverse_wrap{ text-align:right;} #recruit #voice_btn_area .reverse .btn_wrap{ margin-right:0; margin-left:12px;} #recruit #voice_btn_area .reverse .name_wrap{ margin-left:0; margin-right:-115px;} #recruit #voice_btn_area .reverse .title_wrap{ margin-left:0; margin-right:-80px;} /*=======募集要項=======*/ /*タブ切り替え全体のスタイル*/ #recruit #guidelines_area .contents_wrap{ margin-top:80px;} #recruit #guidelines_area .tabs { margin-top: 50px; padding-bottom: 40px; width: 1000px; margin: 0 auto;} /*タブのスタイル*/ #recruit #guidelines_area .tabs > ul{ display:flex; justify-content:center; border-bottom: 1px solid #5BC5F1; margin-bottom:60px;} #recruit #guidelines_area .tabs > ul li{ margin-right:20px;} #recruit #guidelines_area .tabs > ul li:last-child{ margin-right:0;} #recruit #guidelines_area .tab_item { font-size:2.1rem; font-weight: bold; letter-spacing:0.28em; width: 390px; height: 88px; line-height: 88px; background:#D6D6D6; text-align: center; color: #000; display: block; transition: all 0.2s ease; cursor:pointer; } #recruit #guidelines_area .tab_item span{ font-size:1.4rem; letter-spacing:0;} #recruit #guidelines_area .tab_item:hover { opacity: 0.75; } /*ラジオボタンを全て消す*/ #recruit #guidelines_area input[name="tab_item"] { display: none; } /*タブ切り替えの中身のスタイル*/ #recruit #guidelines_area .tab_content { display: none; clear: both; overflow: hidden; } /*選択されているタブのコンテンツのみを表示*/ #recruit #guidelines_area #item_01:checked ~ #content_01, #recruit #guidelines_area #item_02:checked ~ #content_02 {display: block;} /*選択されているタブのスタイルを変える*/ #recruit #guidelines_area #item_01:checked ~ ul .item_01btn, #recruit #guidelines_area #item_02:checked ~ ul .item_02btn{background-color: #5BC5F1; color: #fff;} #recruit #guidelines_area table{width:800px; margin:0 auto; border-collapse:collapse; border-spacing: 0; margin-bottom:100px;} #recruit #guidelines_area table th, #recruit #guidelines_area table td{ padding:10px 20px; margin:0;} #recruit #guidelines_area table th{ border-top:#fff 1px solid; text-align:left; color:#fff; background:#5BC5F1; letter-spacing:0.16em; font-weight:normal;} #recruit #guidelines_area table td{ border-top:#E8EAEB 1px solid; } #recruit #guidelines_area table td:last-child{ border-bottom:#E8EAEB 1px solid; } #recruit #entry_area{ margin-bottom:-1px; position:relative; z-index:1; } #recruit #entry_area .contents_wrap{ margin:50px auto 20px auto;} #recruit #entry_area .btn_entry a{ background:#fff; color:#333; width:290px; padding:25px; text-align:center; display:block; text-decoration:none; margin:0 auto; letter-spacing:0.28em; font-weight:bold; font-size:18px;} #recruit #entry_area .btn_entry a:hover{ background:#666; color:#fff;} /*プライバシーポリシー*/ .remodal p{ text-align:left; margin-top:1em;} @media only screen and (max-width: 1024px) { /*================= 採用共通 =================*/ /*=======先輩の声=======*/ #recruit #voice_btn_area .contents_wrap{ width:100%; text-align:center; } #recruit #voice_btn_area .mark, #recruit #voice_btn_area .mark_reverse{ margin:0 auto; position: static;} #recruit #voice_btn_area .flex{align-items:flex-start; justify-content:center; flex-direction: column-reverse;} #recruit #voice_btn_area .reverse{flex-direction: column-reverse;} #recruit #voice_btn_area .btn_wrap{width:100%; margin:auto; line-height:0;} #recruit #voice_btn_area .btn_wrap .sub_img{ display:none;} #recruit .btn_detail a {width:90%;} #recruit #voice_btn_area .name_wrap{ margin:0 auto; padding:10px 20px; margin-top:1px; min-height:auto; width:90%; text-align:left;} #recruit #voice_btn_area #name_wrap_toritani{ margin-left:auto;} #recruit #voice_btn_area .title_wrap{ margin:0 auto; padding:10px 20px; min-height:auto; width:90%; text-align:left;} #recruit #voice_btn_area .mark_reverse_wrap{ text-align:center;} #recruit #voice_btn_area .reverse .btn_wrap{ margin:0 auto;} #recruit #voice_btn_area .reverse .name_wrap{ margin:0 auto;} #recruit #voice_btn_area .reverse .title_wrap{ margin:0 auto;} #recruit #voice_btn_area .voice_img{ width:90%; margin:0 auto; margin-top:1px;} #recruit #guidelines_area table:last-child{ margin-bottom:0px;} /*=======募集要項=======*/ /*タブ切り替え全体のスタイル*/ #recruit #guidelines_area .tabs { margin-top: 50px; padding-bottom: 40px; width: 100%; margin: 0 auto;} /*タブのスタイル*/ #recruit #guidelines_area .tabs > ul{ margin-bottom:20px; } #recruit #guidelines_area .tabs > ul li{ margin-right:0; width:50%;} #recruit #guidelines_area .tab_item { font-size:1.6rem; width:100%; height: 88px; line-height: 88px; display: block; } #recruit #guidelines_area .tab_item span{ font-size:1rem; display:block; line-height:0; margin-top:-26px; } #recruit #guidelines_area table{width:100%; border:#eee 1px solid;} #recruit #guidelines_area table th, #recruit #guidelines_area table td, #recruit #guidelines_area table td:last-child{ border:none;} #recruit #guidelines_area table th, #recruit #guidelines_area table td{ display:block;} } @media only screen and (max-width: 768px) { #recruit #voice_btn_area .title_wrap{font-size:2.1rem;} } /*================= 採用トップ =================*/ #recruit article{ background:url(../recruit/images/main_img.jpg) no-repeat center center;background-size: cover; } #recruit h2{ color:#fff;} #recruit section{ margin-bottom:70px;} #recruit section.bg_gray{ background:#E8EAEB; padding:70px 0;} #recruit section#read .contents_wrap{width:950px; margin:0 auto; display:flex;} #recruit section#read .txt_wrap{margin-left:60px;} #recruit section#read .txt_wrap p{font-size:1.6rem;letter-spacing:0.12em; line-height:37px;} #recruit section#read h3{ font-size:3.9rem; letter-spacing:0.62em; margin-top:-150px; margin-left:120px; line-height:220%;font-weight:normal; font-weight:bold; } #recruit section#read h3 span.blue{ color:#5ec5f2;} #recruit section#read h3 span.bg{ background:#fff; padding:0.5em 0.3em;} #recruit h4{ font-size:1.8rem; letter-spacing:0.28em;text-align:center; display:block; } #recruit h4 span{border-bottom:#333 2px solid;padding-bottom:8px; padding-left:4px;} #recruit #read h4{ margin:35px/*←パンくずの高さ分短く*/ 0 70px 0; margin-left:1.5em; text-align:left;} /*魅力*/ #recruit #charm_area h4{padding-bottom:20px;} #recruit #charm_area .contents_wrap{background:url("../recruit/images/charm_line_top_bg.png") repeat-x top,url("../recruit/images/charm_line_bottom_bg.png") repeat-x bottom; } #recruit #charm_area ul#charm_all{background:url("../recruit/images/charm_line_top.png") no-repeat top,url("../recruit/images/charm_line_bottom.png") no-repeat bottom; display:flex; width:1010px; margin:0 auto; } #recruit #charm_area #charm_all > li:first-child{ margin-left:4px;} #recruit #charm_area #charm_all > li:last-child{ border-right:RGBA(0,0,0,0.2) 1px solid;} #recruit #charm_area #charm_all > li{ width:334px; padding:60px 30px; border-left:RGBA(0,0,0,0.2) 1px solid;} #recruit #charm_area .charm_column li.icon{ text-align:center; margin-top:30px; min-height:48px; } #recruit #charm_area .charm_column li h5{ text-align:center; margin:30px auto; font-size:2.4rem; letter-spacing:0.34em; color:#5ec5f2; } #recruit #charm_area .charm_column li p{ margin-bottom:20px;} #recruit #charm_area .charm_column li.img img{ max-width:277px;} @media only screen and (max-width: 1024px) { /*================= 採用トップ =================*/ #recruit section{ padding:0 20px;} #recruit .vw{ writing-mode:horizontal-tb;} #recruit section#read .contents_wrap{width:100%; margin:0 auto; display: block;} #recruit section#read .txt_wrap{margin-left:0px;} #recruit section#read h3{ margin:0; margin-top:30px; } #recruit #read h4{ margin:60px auto; text-align:center;} /*魅力*/ #recruit #charm_area .contents_wrap{background:none; } #recruit #charm_area ul#charm_all{background:none; display: block; width:100%; margin:0 auto; } #recruit #charm_area #charm_all > li:last-child{ border:none;} #recruit #charm_area #charm_all > li{ width:100%; padding:60px 0px; border:none; border-bottom:#ddd 1px solid;} #recruit #charm_area .charm_column li.icon{ margin-top:0px; min-height:auto; } #recruit #charm_area .charm_column li.img{ text-align:center;} #recruit #charm_area .charm_column li.img img{ max-width:100%;} } @media only screen and (max-width: 768px) { #recruit section#read h3{ font-size:3rem;} } /*================= 先輩の声 =================*/ .voice #voice_nakayama article#cat-main-img, .voice #voice_tada article#cat-main-img, .voice #voice_toritani article#cat-main-img{height:575px;} /*各人の写真、配色*/ .voice #voice_nakayama article{ background:url(../recruit/voice/images/voice_nakayama_main.jpg) no-repeat center center;background-size: cover; } .voice #voice_tada article{ background:url(../recruit/voice/images/voice_tada_main.jpg) no-repeat center center;background-size: cover; } .voice #voice_toritani article{ background:url(../recruit/voice/images/voice_toritani_main.jpg) no-repeat center center;background-size: cover; } .voice #voice_nakayama .voice_column, .voice #voice_nakayama .voice_subcolumn{background:url(../recruit/voice/images/voice_nakayama_line.png) no-repeat top center;} .voice #voice_tada .voice_column, .voice #voice_tada .voice_subcolumn{background:url(../recruit/voice/images/voice_tada_line.png) no-repeat top center;} .voice #voice_toritani .voice_column, .voice #voice_toritani .voice_subcolumn{background:url(../recruit/voice/images/voice_toritani_line.png) no-repeat top center;} .voice #voice_nakayama h3{ color:#A6D493; border-left:#A6D493 7px solid;} .voice #voice_tada h3{ color:#F6AACB; border-left:#F6AACB 7px solid;} .voice #voice_toritani h3{ color:#5ec5f2; border-left:#5ec5f2 7px solid;} .voice #voice_nakayama .voice_subcolumn .txt_wrap{background:url(../recruit/voice/images/voice_nakayama_last_bg.jpg);} .voice #voice_tada .voice_subcolumn .txt_wrap{background:url(../recruit/voice/images/voice_tada_last_bg.jpg);} .voice #voice_toritani .voice_subcolumn .txt_wrap{background:url(../recruit/voice/images/voice_toritani_last_bg.jpg);} /*メインビジュアルとタイトル周り*/ .voice article{ padding-bottom:90px;} .voice article .contents_wrap{ width:1000px; margin:0 auto; } .voice article .mark, .voice article .mark_reverse{ margin-top:200px; margin-left:20px; position: absolute; } .voice article .mark_reverse{ right:100px; margin-left:0px; position: absolute; } .voice article .flex{ display:flex;align-items:flex-end;justify-content: flex-end; height:575px; margin-top:160px; } .voice article .reverse{flex-direction: row-reverse;} .voice article .en{ display:block; font-size:1.5rem;} .voice article .name{display:block; font-size:2rem; font-weight:bold;} .voice article b{ font-size:1.5rem;} .voice article .date{display:block; font-size:1.2rem;} .voice article .name_wrap{ background:#fff; letter-spacing:0.2em; padding:25px; min-height:210px;} .voice article #name_wrap_toritani{ margin-left:-135px; } .voice article .title_wrap{ background:#fff; z-index:-1; margin-left:-40px; font-size:3.5rem; letter-spacing:0.34em; padding:40px 40px; min-height:550px; font-weight:bold;} .voice article .mark_reverse_wrap{ text-align:right;} .voice article .reverse .name_wrap{ margin-left:0; margin-right:-115px;} .voice article .reverse .title_wrap{ margin-left:0; margin-right:-50px;} /*各本文*/ .voice .voice_column{ padding-top:65px; margin-top:65px;} .voice section.voice_column:first-of-type{margin-top:20px; padding-top:100px;} .voice .voice_column .contents_wrap{ display:flex; align-items:flex-start; justify-content:center;} .voice .voice_column .contents_wrap .txt_wrap{ width:460px; margin-right:55px;} .voice .voice_column h3{ font-size:2.6rem; font-weight:bold; letter-spacing:0.2em; padding-left:35px; margin-bottom:30px;} .voice p{ margin-left:10px;} /*各本文 反転*/ .voice .reverse .contents_wrap{flex-direction:row-reverse;} .voice .reverse .contents_wrap .txt_wrap{margin-left:55px; margin-right:0;} /*サブコラム*/ .voice .voice_subcolumn{ padding-top:65px; margin-top:65px;} .voice .voice_subcolumn .contents_wrap{ width:1000px; margin:0 auto; display:flex; align-items:flex-start;flex-direction: row-reverse;} .voice #voice_tada .voice_subcolumn .contents_wrap, .voice #voice_toritani .voice_subcolumn .contents_wrap{flex-direction: row;} .voice .voice_subcolumn .txt_wrap{ width:668px; display:flex; align-items:flex-start;flex-direction:row-reverse;align-items: center;} .voice .voice_subcolumn .txt_wrap p{ width:325px; margin-right:100px;} .voice #voice_tada .voice_subcolumn .txt_wrap p, .voice #voice_toritani .voice_subcolumn .txt_wrap p{ width:325px; margin-right:0; padding:40px 40px 40px 0;} .voice .voice_subcolumn .txt_wrap img{ padding:20px;} .voice .voice_subcolumn .tag{ margin:-150px; z-index:1;} .voice #voice_tada .voice_subcolumn .tag{ margin-top:-200px;} /*下部、他の先輩*/ .voice section#voice_btn_area { margin-top:0; padding-top:0;} @media only screen and (max-width: 1024px) { .voice article{ padding-top:0px; margin-bottom:0;} .voice article .contents_wrap{ width:100%; text-align:center; } .voice article .mark, .voice article .mark_reverse{ margin:0 ; position: absolute; left:10px; top:180px;} .voice article img{ width:190px;} .voice article .flex{align-items:flex-start; justify-content:flex-start; flex-direction:column-reverse;} .voice article .reverse{flex-direction: column-reverse;} .voice article .name_wrap{ margin:0 auto; padding:10px 20px; margin:0; min-height:auto; width:auto; text-align:left; margin-bottom:15px;} .voice article #name_wrap_toritani{ margin-left:auto;} .voice article .title_wrap{ margin:0; padding:10px 20px; min-height:auto; width:auto; text-align:left; font-size:2.1rem;} .voice section.voice_column:first-of-type{margin-top:65px;} .voice .voice_column .contents_wrap{ display:block; padding-top:65px;} .voice .voice_column .contents_wrap .txt_wrap{ width:100%; margin:0;} .voice .reverse .contents_wrap .txt_wrap{margin:0;} .voice .voice_column p{ margin-bottom:20px;} .voice .voice_column img{ width:100%;} .voice .voice_subcolumn .contents_wrap{ width:auto; margin:0 auto; display:block;} .voice .voice_subcolumn .txt_wrap{ width:auto; display: flex; flex-direction:column-reverse;justify-content:center; padding:20px;} .voice .voice_subcolumn .tag{ width:300px; margin:0; padding:0; margin-bottom:-150px; max-width:100%;} .voice #voice_tada .voice_subcolumn .tag{ margin-top:0; margin-bottom:-130px;} .voice #voice_toritani .voice_subcolumn .tag{ margin-top:0;margin-bottom:-130px;} .voice .voice_subcolumn .txt_wrap p{ width:auto; margin:0; padding:0 20px 20px 20px;} .voice #voice_tada .voice_subcolumn .txt_wrap p, .voice #voice_toritani .voice_subcolumn .txt_wrap p{ width:auto; margin:0; padding:0 20px 20px 20px;} .voice .voice_subcolumn .txt_wrap img{ padding-top:40px;} } @media only screen and (max-width: 768px) { /*キャッチが顔にかかるので微調整*/ .voice article .mark, .voice article .mark_reverse{top:65px;} .voice article img{ width:140px;} } /*================= エントリー =================*/ #contact #entry article{ background:url(../recruit/entry/images/main_img.jpg) no-repeat center center;background-size: cover; } /* =================================================================== 　news / 新着情報 ※WP =================================================================== */ #news article.read{ background:url(../news/images/main_img.jpg) no-repeat center center;background-size: cover; } #news article.read h2{ color:#fff;} /*↓サイドメニュー*/ #news #secondary{ font-size:1.2rem;} #news #secondary h2{font-size:1.4rem;} /*↓一覧*/ #news #primary article{ border-top:#ddd 1px solid; padding-top:50px;} #news h3,/*投稿のタイトル*/ .entry-header h1.entry-title{ font-size:2.6rem; font-weight:bold;}/*詳細ページの投稿のタイトル*/ #news .entry-meta{font-size:1.4rem;}/*日付等*/ #news .entry-content{font-size:1.6rem;}/*本文文字*/ /*↓ネクストバック*/ .nav-subtitle, .nav-title{font-size:1.4rem;} .tag-0, .tag-1, .tag-2, .tag-3, .tag-4, .tag-5, .tag-6, .tag-101{font-size:1.1rem;background:#666; display:inline-block; padding:0.1em 1em; border-radius:6px; color:#fff; margin:0 10px; width:120px; text-align:center;} .tag-0{background:#5AC5F1;} .tag-1, .tag-2, .tag-3, .tag-4, .tag-5, .tag-6{background:#F7B967;} .tag-101{background:#D4A46C;}