@charset "UTF-8";
html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed,
figure, figcaption, footer, header, hgroup,
menu, nav, output, ruby, section, summary,
time, mark, audio, video {
margin: 0;
padding: 0;
border: 0;
font-style:normal;
font-weight: normal;
font-size: 100%;
vertical-align: baseline;
}
article, aside, details, figcaption, figure,
footer, header, hgroup, menu, nav, section {
display: block;
}
html{
overflow-y: scroll;
}
blockquote, q {
quotes: none;
}
blockquote:before, blockquote:after,
q:before, q:after {
content: '';
content: none;
}
input, textarea{
margin: 0;
padding: 0;
}
ol, ul{
list-style:none;
}
table{
border-collapse: collapse;
border-spacing:0;
}
caption, th{
text-align: left;
}
a:focus {
outline:none;
}
.both{
clear:both;
}
p {
display: block;
-webkit-margin-before:0;
-webkit-margin-after: 0;
-webkit-margin-start: 0px;
-webkit-margin-end: 0px;
}
.inline_block {
display: inline-block;
*display: inline;
*zoom: 1;
}
html{ font-family: 'Noto Sans JP', sans-serif,"游ゴシック Medium",YuGothic,YuGothicM,"Hiragino Kaku Gothic ProN","Hiragino Kaku Gothic Pro",メイリオ,Meiryo,sans-serif;
font-size:16px;
line-height:1.6;
color:#333;
}
body{
-webkit-text-size-adjust: 100%;
}
img{
display:block;
max-width:100%;
height:auto;
}
a,
a:hover,
a:active,
a:visited,
a:link{
text-decoration:none;
color:inherit;
}
a:link:hover{
opacity: 0.7;
}
ol, ul{
list-style:none;
}
.clearfix:after {
content: ".";
display: block;
clear: both;
height: 0;
visibility: hidden;
}
.clearfix {
min-height: 1px;
}
* html .clearfix {
height: 1px; /*/*/}
.both{
clear:both;
}
.inline_block {
display: inline-block;
*display: inline;
*zoom: 1;
}
span{
display:inline-block;
font-weight: inherit;
}
p{margin-bottom:20px;
}
p:last-child{margin-bottom:0px;
}
table {
border-top:solid 1px #d1d1d1;
border-left:solid 1px #d1d1d1;
}
table th,
table td{
padding:10px;
border-bottom:solid 1px #d1d1d1;
border-right:solid 1px #d1d1d1;
}
@media (min-width: 701px){
.twocolumn{
margin:auto;
width:100%;
display:flex;
justify-content:flex-start;
flex-wrap:wrap;
}
.twocolumn li{
width:calc(50% - 10px);
box-sizing:border-box;
margin-top:20px;
}
.twocolumn li:nth-child(2n){
margin-right:0;
}
.twocolumn li:nth-child(-n + 2){
margin-top:0;
}
.twocolumn li img{
max-width:100%;
display:block;
margin:0;
}
.twocolumn li p{
}
.threecolumn{
display:flex;
margin:auto;
justify-content:flex-start;
flex-wrap:wrap;
}
.threecolumn li{
width:calc(33.33% - 100px / 3);
box-sizing:border-box;
margin-right:50px;
margin-top:50px;
}
.threecolumn li:nth-child(3n){
margin-right:0;
}
.threecolumn li:nth-child(-n + 3){
margin-top:0;
}
.threecolumn li img{
max-width:100%;
display:block;
margin:0;
}
}
@media (max-width: 640px){
}
.error404.content-area{
float:none;
margin:auto;
}
.error404.content-area main{
text-align:center;
margin-right:auto;
}
.error404 h1 {
font-size: 70px;
}
@media screen and (max-width: 800px){
.error404 h1 span {
display: block;
font-size: 36px;
margin-bottom: 20px;
}
}
#page{
padding-top: 82px;
}
.site-header{
position: fixed;
top: 0;
left: 0;
width: 100%;
box-sizing: border-box;
padding: 20px;
background-color: #fff;
z-index: 100;
}
.headerlogo{
max-width: 230px;
width: 40%;
}
.header_btn{
display: flex;
color: #fff;
}
.header_btn a{
font-size: 16px;
padding: 5px 0;
width: 170px;
display: block;
border-radius: 50px;
background-color: #e75c00;
text-align: center;
margin-right: 20px;
font-weight: 700;
}
.header_btn a:last-child{
margin-right: 0;
}
.header_container{
margin:auto;
max-width:1340px;
width:100%;
position:relative;
display:flex;
justify-content:space-between;
margin:auto;
align-items:center;
}
.headermain{
position:relative;
width:100%;
display:flex;
justify-content:space-between;
}
.spnavibtn{
display:none;
align-items:center;
}
.navibtn{
display: block;
position: relative;
width: 26px;
height: 23px;
box-sizing: border-box;
border-top: solid 3px #004ea2;
border-bottom: solid 3px #004ea2;
cursor: pointer;
}
.navibtn:after{
top:0;
bottom: 0;
left: 0;
margin:auto;
position:absolute;
height:3px;
width:100%;
background-color:#004ea2;
display:block;
content:"";
transition:0.3s;
transform-origin: 100% 0%;
}
.headernavi{
flex-shrink:0;
}
.headernavi ul{
margin:auto;
max-width: 1240px;
display:flex;
}
.headernavi ul a{
padding:25px 10px;
color:#000;
display:block;
font-size:15px;
position:relative;
transition:0.3s 0.2s;
}
.headernavi ul a.current{
}
.headernavi ul a:after{
content:"";
display:block;
left:0;
right:0;
bottom:0;
height:1px;
background-color:#999;
width:0;
transition: 0.3s 0.3s;
}
.headernavi ul a:hover{
color:#999;
}
.headernavi ul a:hover:after{
width:100%;
}
.headernavi ul a.current:after{
background-color:#000;
width:100%;
}
.header_right{
display: flex;
align-items: center;
}
.headernavi{
display: flex;
align-items: center;
margin-right: 20px;
}
.headernavi li{
margin-right: 15px;
}
.headernavi a{
padding-left: 15px;
display: block;
background-size: 8px auto;
background-position: center left;
background-repeat: no-repeat;
background-image: url(//hataluck.jp/wp-content/themes/basetemplate/images/headernavi_arrow.svg);
}
.headernavi a:hover{
}
.search_bar{
top: 0;
transition: 0.3s;
right: 0;
z-index: 10;
padding: 10px;
background-color: #fff;
box-shadow: 0px 0px 6px 0px rgba(0,0,0,0.6);
font-size: 14px;
}
.search_bar form{
width: 300px;
display: flex;
align-items: center;
}
.search_bar input[type='submit']{
word-break: keep-all;
}
.search_bar p{
margin: 0;
word-break: keep-all;
margin-right: 10px;
}
.search_bar button{
word-break: keep-all;
margin-left: 10px;
}
.search_btn{
padding: 4px;
background-color:#0067e6;
}
.search_btn img{
width: 16px;
height:auto;
}
.head_contact a{
background: #004ea2;
color: #ffffff;/**/line-height: 0; display: block;
padding-top: 35px;
padding-bottom: 35px;
padding-left: 25px;
padding-right: 25px;
transition: all 1s ease-out;
}
.head_contact a:hover{
background: #003976;
}
.spnavi{
display:none;
}
.navi_close{
display:none;
} .btn_a{
display:flex;
justify-content:center;
color:#fff;
}
.btn_a a{
text-align: center;
background-color: #0067E6;
border: solid 2px #0067E6;
display: flex; justify-content: center;
align-items: center;
font-size: 20px; box-sizing: border-box;
transition: 0.3s;
line-height: 1;
padding: 15px;
border-radius: 50px;
min-width: 230px;
box-sizing: border-box;
}
.btn_a a:hover{
background-color:#ffffff;
color: #0067E6;
}
.btn_a a span.center{
margin-bottom: 0.3em;
}
.btn_w{
display:flex;
justify-content:center;
color:#000;
}
.btn_w a{
box-sizing:border-box;
width: 140px;
text-align: center;
background-color: #fff;
border:solid 1px #000;
display: flex;
height: 30px;
justify-content: center;
align-items: center;
font-size: 14px;
border-radius:5px;
transition:0.3s;
}
.btn_w a:hover{
color:#fff;
background-color:#000;
}
@media (min-width: 801px){
.three_column{
display: flex;
flex-wrap: wrap;
}
.three_column li{
width: calc(33.33% - 70px / 3);
margin-right: 35px;
margin-top:40px;
}.three_column li:nth-child(-n + 3){
margin-top: 0;
}.three_column li:nth-child(3n){
margin-right: 0;
}
}
@media (max-width: 800px){
.three_column li{
margin-top: 30px;
}
.three_column li:first-child{
margin-top: 0px;
}
}
.movie_list_item{
background-color: #F2F2F2;
}
.movie_list_item h4{
height: 3.2em;
padding: 5px 10px;
display: block;
overflow: hidden;
overflow: hidden;
display: -webkit-box;
-webkit-box-orient: vertical;
-webkit-line-clamp: 2;
}
.movie_list_item .listitem_box_img{
position: relative;
}
.movie_list_item .listitem_box_img:after {
content: "";
width: 25%;
height: 0;
padding-top: 25%;
background-image: url(//hataluck.jp/wp-content/themes/basetemplate/images/icon_play.svg);
background-size: contain;
background-position: center;
background-repeat: no-repeat;
position: absolute;
left: 0;
right: 0;
top: 0;
bottom: 0;
margin: auto;
display: block;
z-index: 10;
transition: 0.3s;
opacity: 0;
}
.movie_list_item a:hover .listitem_box_img:after {
opacity: 0.6;
}
.movie_list_item .listitem_box_img:before {
content: "";
width: 100%;
height: 100%;
z-index: 5;
position: absolute;
top: 0;
left: 0;
background-color: rgba(0,0,0,0);
transition: 0.3s;
}
.movie_list_item a:hover .listitem_box_img:before {
background-color: rgba(0,0,0,0.60);
}
.listitem_box{
background-color: #F2F2F2;
}
.listitem_box h4{
color: #0067E6;
font-size: 20px;
height: 1.6em;
display: block;
overflow: hidden;
overflow: hidden;
display: -webkit-box;
-webkit-box-orient: vertical;
-webkit-line-clamp: 1;
}
.listitem_box_img{
width: 100%;
display:block;
padding-top: calc(56.25% - 2px);
background-position: center;
background-size: cover;
position: relative;
}
.postcat{
display: flex;
flex-wrap: wrap;
justify-content: flex-start;
align-items: stretch;
width: 100%;
position: absolute;
top: 0;
left: 0;
}
.postcat > li{
background-color: #2979ad;
color: #fff;
font-size: 16px;
padding: 5px 15px;
display: block;
margin-right: 10px;
margin-bottom: 10px;
}
.listitem_box_text{
}
.postdate{
display: block;
word-break: keep-all;
margin: 0;
color: #b2b2b2;
padding: 5px 0;
font-size: 14px;
font-weight: 700;
}
.listitem_box_text h4{
margin-bottom: 10px;
color: #2979ad;
font-weight: 700;
}
@media (min-width: 701px){
}
@media (max-width: 700px){
}
.site-footer{
background-color: #fff;
padding: 60px 30px;
padding-bottom: 20px;
}
.site-footer .left{
}
.footer_logo{
width: 200px;
margin-bottom: 30px;
display: block;
}
.site-footer .dl_batch{
display: flex;
justify-content: flex-start;
flex-wrap: wrap;
}
.site-footer .dl_batch > p {
width: 100%;
text-align: left;
margin-bottom: 10px;
font-size: 14px;
}
.site-footer .dl_batch a{
display: block;
margin-right: 10px;
margin-bottom: 10px;
height: 60px;
max-height: 10vw;
}
.site-footer .dl_batch a img{
width: auto;
height: 60px;
max-height: 10vw;
display: block;
}
.site-footer .right{
display: flex;
justify-content: flex-end;
flex-shrink: 0;
flex-direction: column;
gap:30px;
}
.site-footer .right .footer_navi{
display: flex;
justify-content: flex-end;
flex-shrink: 0;
}
.site-footer .right ul{
margin-left: 20px;
}
.site-footer .right a{
display: block;
padding-left: 15px;
color: #8b8b8b;
color: #333333;
position:relative;
}
.site-footer .right a:before{
content: "";
position: absolute;
width: 0;
height: 0;
bottom: 0px;
top: 0;
left: 0;
margin: auto;
border-top: 5px solid transparent;
border-left: 8px solid #2979ad;
border-bottom: 5px solid transparent;
border-right: 0px solid transparent;
}
.site-footer .copyright{
color:#808080;
color:#333333;
text-align: center;
padding: 20px 0;	
box-sizing: border-box;
width: 100%;
border-top: solid 1px #808080;
}
.footcontents{
display: flex;
justify-content:space-between; 
align-items: flex-start;
max-width: 1300px;
margin: auto;
margin-bottom: 50px;
}
.certification_mark{
display: flex;
justify-content: flex-end;
gap: 5px;
align-items: flex-start;
}
.certification_mark div{
background-color: #fff;
padding: 0px;
display: block;
width: auto;
height: 70px;
display: flex;
gap: 5px;
}
.certification_mark div img{
width: auto;
height: 100%;
}
@media (max-width: 800px){
.footcontents{
flex-direction: column;
}
.site-footer .left {
display: flex;
align-items: center;
flex-direction: column;
width: 100%;
}
.site-footer .dl_batch {
margin-bottom: 30px;
justify-content: center
}
.site-footer .dl_batch a:last-child {
margin-right: 0;
}
.site-footer .dl_batch > p {
text-align: center;
}
.site-footer .right {
width: 100%;
justify-content: center;
}
.site-footer .right ul {
margin: 0 20px;
}
.certification_mark{
justify-content: center;
}
}
@media (max-width: 600px){
.site-footer .right .footer_navi{
flex-wrap: wrap;
}
.site-footer .right ul{
margin: 0;
margin-bottom: 20px;
width: 50%;
}
.site-footer .right ul:first-child{
width: 100%;
}
.site-footer .right ul:last-child{
margin-bottom: 0px;	
}
}
@media (max-width: 400px){
.site-footer {
padding: 60px 20px;
}
.site-footer .right a {
font-size: 13px;
padding-left: 10px;
}
.site-footer .right a:before {
border-top: 3px solid transparent;
border-left: 6px solid #2979ad;
border-bottom: 3px solid transparent;
}
}
.page_container{
padding:70px 20px;
padding-bottom:0;
margin:auto;
min-height: 500px;
position: relative;
}
.page_container > .inner{
padding-bottom: 70px;
}
.page_title{
font-size: 24px;
margin: 0px;
text-align: center;
color: #0167e6;
line-height: 1.4;
font-weight: 700;
}
.page_header{
color: #fff;
padding: 0 20px;
height: 100px;
box-sizing: border-box;
display: flex;
justify-content: center;
align-items: center;
background-image: url(//hataluck.jp/wp-content/themes/basetemplate/images/pageheader_bg.jpg);
position: relative;
}
.page_header .imgtitle {
max-height: 40px;
height: 7vw;
margin: 0;
}
.page_header .page_header_kome{
position: absolute;
bottom: -30px;;
padding: 0 20px;
box-sizing: border-box;
max-width: 1020px;
margin: auto;
left: 0;
right: 0;
color: #0067e6;
text-align: right;
}
.title_illust{
width: 160px;
}
.page_header .imgtitle img {
width: auto;
height: 130%;
margin: auto;
}
@media (max-width: 800px){
.title_illust{
width: 80px;
}
.page_header {
height: 130px;
}
}
#page{
position: relative;
z-index: 10;
}
.navigation .screen-reader-text{
display:none;
}
.pagenavi{
margin-top:50px;
display:flex;
justify-content:center;
align-items:center;
}
.contact{
border:none;
margin-left:110px;
max-width:740px;
width:100%;
}
.contact th,
.contact td{
border:none;
}
.contact th{
width:190px;
}
.contact span{
width:100%;
}
input, textarea{
padding:5px;
width:100%;
box-sizing:border-box;
}
input[type="checkbox"] {
width: auto;
}
input[type="submit"]{
border: none;
border: solid 1px #004ea2;
color: #004ea2;
background-color: #fff;
width: 150px;
padding: 5px 0;
cursor:pointer;
transition: 0.3s;
}
input[type="submit"]:hover{
color: #fff;
background-color: #004ea2;
}
.spnavi_bg{
display: none;
position: fixed;
width: 100%;
top: 0;
height: 100vh;
left: 0;
background-color: rgba(0,0,0,0.50);
z-index: 90;
cursor: pointer;
}
@media (min-width:1101px){
.spnavi{
display:none !important;
}
}
@media (max-width:1100px){
.spnavibtn{
display:flex;
}
.headernavi,
.en_link{
display:none;
}
.head_contact{
display: none;
}
.site-header{
transition:0.5s;
overflow:hidden;
}
.site-header.active{
}
.spnavi{
position: fixed;
justify-content: center;
align-items: center;
right: -220px;;
bottom: 0;
top: 0;
margin: auto;
height:calc(100vh - 140px);
height: 100vh;
overflow:auto;
font-size: 20px;
background-color: #fff;
transition: 0.5s;
display: block;
z-index: 102;
}
.spnavi_bg{
}
.site-header.active .spnavi{
right: 0;
}
.search_btn{
display: none;
}
.spnavi{
color: #2979ad;
}
.spnavi li a{
width: 220px;
margin: auto;
padding: 0.5em 1em;
padding-right: 0;
display: block;
box-sizing: border-box;
border-bottom: solid 1px #cccccc ;
font-size: 16px;
}
.spnavi li.spnavi_logo a{
padding: 1em 2em;
}
.spnavi li.head_contact_sp a{
background-color: #004ea2 ;
color: #fff;
}
.spnavi.active{
display:flex;
}
.spnavi > div{
margin: auto;
display: flex;
flex-direction: column;
justify-content: center;
overflow: auto;
position: relative;
height:calc(100vh - 140px);
}
.spnavi > div > ul{
overflow:auto;
}
.spnavi .navi_child{
display:none;
}
.navi_parent{
display:flex;
flex-wrap:wrap;
align-items: center;
}
.navi_parent ul{
width:100%;
}
.navi_parent ul li{
margin-bottom:0;
margin-top:0.5em;
margin-left:1em;
}
.navi_child{
font-size:16px;
}
.childopen{
transform:rotateZ(45deg);
border-bottom:solid 2px #000;
border-right:solid 2px #000;
width: 15px;
height: 15px;
margin-left: 15px;
margin-top: 0px;
margin-top: -10px;
}
.childopen.opend{
transform:rotateZ(225deg);
margin-top: 10px;
}
.header_btn{
display: none;
}
.navi_close{
position: fixed;
right: -220px;
top: 0px;
margin: auto;
width: 45px;
transition: 0.5s;
display: block;
z-index: 101;
background-color: #004ea2;
padding: 10px;
box-sizing: border-box;
cursor: pointer;
}
.navi_close.active{
right: 220px;
}
}
.popupmoviebox{
position:fixed;
width:90%;
z-index:100001;
display:none;
left:5%;
top:50%;
margin-top:-25.3125%;	
}
.popupmoviebox iframe{
width:100%;
}
.popupmoviebg{
position:fixed;
height:100vh;
width:100vw;
z-index:100000;
display:none;
top: 0;
left: 0;
background-color:rgba(0,0,0,0.70);
}
.moviethumb{
cursor:pointer;
}
.youtubearea{
padding:0 !important;
width:100%;
height:0;
position:relative;
padding-top: 56.25% !important;
overflow:hidden;
margin-bottom:20px;
}
.youtubearea iframe{
width:100%;
height:100%;
position:absolute;
top:-20%;
right:-20%;
left:-20%;
bottom:-20%;
margin:auto;
}
.btn_blue, .btn_orange, .btn_white {
display: flex;
justify-content: center;
margin-bottom: -15px;
color: #fff;
}
.btn_white {
color: #2979ad;
}
.btn_blue a,
.btn_blue p, .btn_orange a, .btn_white a {
text-align: center;
font-size: 18px;
color: inherit;
border-radius: 10px;
overflow: hidden;
position: relative;
max-width: 400px;
width: 100%;
margin: 0 15px;
margin-bottom: 15px;
padding: 10px 0;
display: block;
font-weight: 700;
}
.btn_blue p,
.btn_blue a {
background-color: #2979ad;
}
.btn_orange a {
background-color: #e75c00;
}
.btn_white a {
background-color: #fff;
}
.btn_blue p:before, 
.btn_orange a:before, .btn_white a:before, .btn_blue a:before {
content: "";
position: absolute;
top: 0;
left: -50%;
margin: auto;
display: block;
width: 100%;
height: 100%;
opacity: 0.11;
background-color: #fff;
transform: skewx(-40deg);
}
.btn_white a:before {
background-color: #2979ad;
}
.btn_blue.small p,
.btn_blue.small a{
font-size: 16px;
border-radius: 10px;
max-width: 250px;
width: 100%;
padding: 0.4em 0;
}
.aco_open{
cursor: pointer;
}
.aco_contents{
display: none;
}
#cv{
padding: 40px 20px;
background-color: #d9eef8;
background-image: url(//hataluck.jp/wp-content/themes/basetemplate/images/bg_4.svg);
background-position: center;
background-size: 100% auto;
text-align: center;
}
#cv h3{
text-align: center;
font-size: 2.1em;
font-size: min(2.1em,calc((100vw - 310px)/21));
display: block;
margin-bottom: 20px;
color: #2979ad;
font-weight: 700;
}
#cv p{
margin-bottom: 40px;
}
#cv .inner{
max-width: 1060px;
margin: auto;
display: flex;
justify-content: space-between;
align-items: center;
}
#cv .inner > div.left {
width: calc(100% - 270px);
}
#cv .inner > div.right {
width: 260px;
}
@media screen and (max-width: 1000px) {
#cv .btn_orange{
flex-direction: column;
align-items: center;
}
}
@media screen and (max-width: 800px) {
#cv .inner{flex-direction: column;}
#cv .inner > div.left{
width: 100%;
}
#cv .inner > div.right {
width: 50%;
margin-top: 30px;
}
#cv h3{
font-size: calc((100vw - 40px)/20);
}
}
.listitem  h4{
margin-bottom: 10px;
font-size: 20px;
color: #2979ad;
font-weight: 700;
}
.case_cat_list{
display: flex;
justify-content: flex-start;
align-items: center;
flex-shrink: 0;
margin-right: -10px;
flex-wrap: wrap;
margin-bottom: -10px;
}
.case_cat_list > li{
color: #fff;
padding: 7px;
font-size: 14px;
line-height: 1;
display: block;
margin-right: 10px;
background-color: #2979ad;
border-radius: 5px;
margin-bottom: 10px;
}
.listitem_case .listitem_box_img{
margin-bottom: 15px;
padding-top: calc(70% - 2px);
}
.listitem_case .case_cat_list {
margin-bottom: 0px;
}
.listitem_case .case_cat_list > li {
font-size: 12px;
border-radius: 3px;
}
.listitem_case{
padding-bottom: 60px;
position: relative;
}
.listitem_case .btn_blue{
position: absolute;
bottom: 0;
width: 100%
}
.listitem_case .btn_blue p{
font-size: 16px;
padding: 5px 0;
max-width: 250px;
}
.sc_banner{
display: block;
margin-bottom: 2em;
}
.sc_banner img{
display: block;
width: 100%;
}
.sc_banner:last-child{
margin-bottom: 0;
}
.side_floatbox{
position: fixed;
top: 0;
opacity: 0;
transform: translate(0, -50px);
transition: 0.3s;
z-index: 10;
}
.side_floatbox.show {
opacity: 1;
transform: translate(0, 0);
}
.side_banner_box a{
display: block;
margin-bottom: 2rem ;
}
@media screen and (max-width: 800px) {
.side_floatbox{
display: none;
}
}
.bottom_banner_box{
width: 100%;
width: calc(100% - (100% - 1260px) / 2 - 400px);
border-radius:0 15px 0 0;
box-sizing: border-box;
padding:15px 7.5px;
background-color: #0a6dbe;
display: flex;
flex-wrap: wrap;
justify-content:center;
align-items:stretch;
position: fixed;
bottom: 0;
left: 0;
opacity: 0;
transform: translate(0, 100px);
z-index: 10;
gap:15px;
padding: 15px 0px;
justify-content: flex-end;
}
.bottom_banner_box .inner{
max-width: 820px;
width: 100%;
padding: 0 20px;
display: flex;
flex-wrap: wrap;
justify-content:space-between;
align-items:stretch;
gap:15px;;
}
.bottom_banner_box p{
margin: 0;
color: #fff;
font-weight: 700;
font-size: min(1em, calc(100vw / 28));
}
.bottom_btnarea{
display: flex;
justify-content:center;
align-items:stretch;
gap:15px;
width: 100%;
max-width: 390px;
}
.bottom_btn{
padding: 0.5em 0em;
border-radius: 0.5em;
color: #0a6dbe;
background-color: #fdf07e;
width: 12em;
display: flex;
align-items: center;
font-size: 1.2rem;
font-weight: 700;
text-align: center;
justify-content: center;
transition: 0.4s;
box-shadow: 0px 0px 0px 0px rgba(0,0,0,0.5);
}
.bottom_btn:link,
.bottom_btn:active,
.bottom_btn:visited,
.bottom_btn:hover{
color: #0a6dbe;
}
.bottom_btn:hover,
.bottom_btn:link:hover,
.bottom_btn:active:hover,
.bottom_btn:visited:hover,
.bottom_btn:hover{
box-shadow: 0px 0px 15px -5px #f2ff8f;
opacity: 1;
background-color: #ffc107;
}
@media screen and (max-width: 1260px) {
.bottom_banner_box{
width: calc(100% - 400px);
}
.bottom_banner_box p{
display: none;
}
.bottom_banner_box .inner{
justify-content:center;
}
}
@media screen and (max-width: 800px) {
.bottom_banner_box{
width: 100%;
border-radius: 0;
}
}
.bottom_banner_box.show {
opacity: 1;
transform: translate(0, 0);
}
.bottom_banner_box a{
width: calc(50% - 7.5px);
max-width: 230px;
}
@media screen and (min-width: 801px) {
}
@media screen and (max-width: 400px) {
html{
font-size:14px;
}
}
div#toc_container{
border:none;
padding:20px;
border-radius:10px;
background:#d9eef9;
}
.optionicon{
position:absolute;
top:0;
left:0;
width:80px;
height:80px;
}
.optionicon img{
max-width: 100%;
max-height: 100%;
}
.tuikacta{
background:#d9eef8;
margin-bottom:2em;
}
.tuikacta .title{
background: #0a6dbe;
font-weight:700;
color:#ffffff;
padding:15px;
font-size:22px;
margin:0;
border:none;
}
.tuikacta .wp-block-columns{
padding:20px;
}
.tuikacta .wp-block-buttons>.wp-block-button{
margin:0 auto;}
.tuikacta .wp-block-button__link{
background-color: #e75c04;
font-weight:700;
}
h2.archive_title{
font-size: 1.8em;
margin: 10px 0;
font-weight: 600;  border-bottom:1px solid #ccc; margin-bottom:40px;padding-bottom:20px;
}
.posttag{
display: flex;
gap:0.8em;
flex-wrap: wrap;
font-size: 0.8em;
}
h4 + .posttag{
margin-top: 10px;
}
.posttag_item{
display: flex;
border-radius: 5px;
padding: 1em;
background-color: #fff;
border: 1px solid #d9e0e8;
padding: 5px 12px;
border-radius: 4px;
line-height: 1;
gap: 0.5em;
align-items: center;
}
.posttag_item:before{
content: "";
width: 0.8em;
height: 0.8em;
display: block;
background-image: url(//hataluck.jp/wp-content/themes/basetemplate/images/tagicon.svg);
background-position: center;
background-repeat: no-repeat;
background-size: contain;
}
 .post_main{
}
.has-background{
padding: 1em;
}
.wp-block-columns{
margin-bottom: 40px;
}
.wp-block-columns:last-child{
margin-bottom: 0;
}
.wp-block-image:last-child{
margin-bottom: 0;
}
.wp-block-image img{
width: 100%;
}
.wp-block-table td:first-child{
background-color: #d9eef8;
text-align: center;
width: 100px;
box-sizing: border-box;
}
input[type="text"] {
padding: 0.3em;
width: 100%;
box-sizing: border-box;
font-size: 1em;
border: none;
border: solid 1px #999;
font-size: 1.2em;
color: #666;
}
main{
max-width: 1140px;
box-sizing: border-box;
margin: auto;
padding:0 20px;
margin-bottom: 60px;
} .page_header{
background-image: url(//hataluck.jp/wp-content/themes/basetemplate/images/page_header_bg.jpg);
background-size:cover;
background-position: center;
background-repeat: no-repeat;
background-color: #0071bb;
height: 260px;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
color: #fff;
}
.page_header .page_title{
font-size: 2.1em;
color: #fff;
font-weight: 800;
margin: 0;
padding: 0;
border: none;
font-weight: 600;
}
.case_header{
}
.page_header .btn_orange{
margin-top: 15px;
margin-bottom: 0;
width: 100%;
}
.page_header .btn_orange a {    margin: 0;
padding: 5px 0px;
border-radius: 15px;
width: 50%;
max-width: 260px;
font-size: 16px;
}
@media (max-width: 800px){
.page_header .btn_orange {
margin-top: 8px;
}
.case_header .btn_orange a {
font-size: 12px;
padding: 3px 0px;
}
}
.breadcrumbs{
color: #47a4c9;
padding: 5px 20px;
max-width: 1340px;
margin: auto;
margin-bottom: 60px;
display: flex;
align-items: center;
justify-content: flex-start;
flex-wrap: wrap;
}
.breadcrumbs span{
color: #000;
font-size: 12px;
}
.breadcrumbs a span{
color: #004ea2;
text-decoration: underline;
}
.breadcrumbs a:hover span{
text-decoration: none;
}
.pankuzu_arrow{
display: block;
margin: 0 10px;
border-top: 5px solid transparent;
border-left: 8px solid #004ea2;
border-bottom: 5px solid transparent;
border-right: 0px solid transparent;
height:0;
width: 0;
}
@media (min-width: 801px){
.side_on{
max-width: 1260px;
display: flex;
justify-content: space-between;
}
.side_on.left{
flex-direction: row-reverse;
}
.side_on > article{
width: 100%;
flex-shrink: 1;
}
.side_on > aside{
width: 360px;
margin-left: 40px;
flex-shrink: 0;
}
.side_on.left > aside{
margin-left: auto;
margin-right: 20px;
}
}
@media (max-width: 800px){
.page_header {
height: 130px;
height: 150px;
}
.side_on aside{
margin-top: 100px;
}
.side_on.sp_reverse aside{
margin-top: 0px;
margin-bottom: 60px;
}
.side_on.sp_reverse{
display: flex;
align-items: stretch;
justify-content: flex-start;
flex-direction: column-reverse;
}
}
.side_search{
background-color: #f1f1f1;
padding:15px 10px;
border-radius: 10px;
color: #666666;
}
.side_title{
font-size: 18px;
font-weight: 700;
margin-bottom: 0px;
display: flex;
justify-content: flex-start;
align-items: center;
}
.side_title img{
width: 18px;
height: auto;
display: block;	
margin-right: 5px;
}
.side_search dl{
padding: 10px;
padding-bottom: 40px;
background-color: #fff;
margin-bottom: 20px;
margin-top: 15px;
}
.side_search dt{
font-weight: 700;
padding-bottom: 5px;
font-size: 16px;
border-bottom: solid 1px;
margin-bottom: 10px;
margin-top: 20px;
}
.side_search dt:first-child{
margin-top: 0px
}
.side_search dd{
margin: 0;
display: flex;
justify-content: flex-start;
align-items: center;
font-size: 14px;
}
.side_search input[type="checkbox"]{
margin-right: 5px;
}
.side_search input[type="submit"]{
color: #fff;
background-color: #2979ad;
font-weight: 700;
padding: 7px;
font-size: 16px;
line-height: 1;
display: block;
border-radius: 5px;
margin: auto;
}
.side_search input[type="submit"]:hover{
background-color: #fff;
color: #2979ad;
opacity: 1;
}
@media (max-width: 800px){
.side_search .aco_open{
position: relative;
}
.side_search .aco_open:after,
.side_search .aco_open:before{
content: "";
background-color:#666666;
display: block;
position: absolute;
top: 0;
bottom: 0;
right: 5px;
margin: auto;
}
.side_search .aco_open:after{
width: 21px;
height: 3px;
}
.side_search .aco_open:before{
width: 3px;
height: 21px;
right: 14px;
transition: 0.3s;
}
.side_search .aco_open.open:before{
height: 1px;
}
}
@media (min-width: 801px){
.side_search .aco_open{
cursor: auto;
}
.side_search .aco_contents{
display: block !important;
}
}
.side_catlistitem{
margin-bottom: 10px;
}
.side_catlistitem a {
padding-left: 15px;
display: block;
background-size: 8px auto;
background-position: center left;
background-repeat: no-repeat;
background-image: url(//hataluck.jp/wp-content/themes/basetemplate/images/headernavi_arrow.svg);
}
.side_postlistitem{
margin-top: 20px;
}
.side_postlistitem a{
display: flex;
justify-content: flex-start;
align-items: flex-start;
font-size: 14px;
position: relative;
line-height: 1.4
}
.side_postlistitem .imgarea{
width: 140px;
margin-right: 10px;
flex-shrink: 0;
padding-top: 75px;
background-size: cover;
background-position: center;
}
.rank_icon{
position: absolute;
top: -10px;
left: -10px;
display: flex;
line-height: 1;
height: 50px;
width: 50px;
border-radius: 50px;
align-items: center;
justify-content: center;
background-color: #2979ad;
color: #fff;
font-weight: 900;
font-size: 27px;
}
.rank_icon.rank1{
background-color: #b3850f;
}
.rank_icon.rank2{
background-color: #989898;
}
.rank_icon.rank3{
background-color: #754c24;
}
.side_postlistitem.oyakudachi h4{
font-weight: 700;
font-size: 16px;
}
.side_postlistitem.oyakudachi h4 span{
opacity: 0.9;
font-weight: 400;
font-size: 12px;
}
.column_sidenavi dl{
margin-bottom: 60px;
}
.column_sidenavi dt{
font-weight: 700;
padding-bottom: 5px;
font-size: 16px;
border-bottom: solid 1px;
margin-bottom: 10px;
margin-top: 40px;
}
.column_sidenavi dt:first-child{
margin-top: 0px
}
.search_flex{
display: flex;
justify-content: space-between;
align-items: stretch;
}
.search_flex input[type="text"] {
width: calc(100% - 90px);
box-sizing: border-box;
}
.search_flex input[type="submit"] {
border-radius: 3px;
width: 75px;
box-sizing: border-box;
height: auto;
margin: 0;
}
.sidenavi_banner{
display: block;
margin-bottom: 40px;
}
.sidenavi_banner img{
max-width: 500px;
width: 100%;
margin: auto;
display: block;
}
.sidenavi_banner:last-child{
margin-bottom: 0;
}
@media (max-width: 700px){
.contact{
margin:auto;
}
.contact table,
.contact tbody,
.contact td,
.contact th{
display:block;
width:100%;
box-sizing: border-box;
}
.twocolumn li,
.threecolumn li{
margin-bottom:20px;
}
.twocolumn li:last-child,
.threecolumn li:last-child{
margin-bottom:0;
}
.page_container {
padding: 40px 20px;
padding-bottom:0;
}
.post_detail{
display:block;
}
.post_detail .left{
margin-bottom: 10px;
}
}
@media (max-width: 480px){
}
.navigation.pagination{
margin-top: 60px;
}
.navigation .screen-reader-text{
display:none;
}
.pagenavi{
margin-top:50px;
display:flex;
justify-content:center;
align-items:center;
color:#004097;
}
.page_num{
margin-bottom:0;
margin-right:20px;
color:#004097;
}
.nav-links{
display:flex;
justify-content: center;
color: #2979ad;
}
.page-numbers{
border:solid 1px #2979ad;
background-color:#fff;
display:flex;
justify-content:center;
align-items:center;
line-height:1;
width:30px;
height:30px;
margin-right:10px;
transition:0.3s;
color: #2979ad;
}
.page-numbers:hover{
color:#fff;
background-color:#0167e6;
}
.page-numbers.current{
color:#fff;
background-color:#2979ad;
}
.page-numbers:last-child{
margin-right:0;
}
.page-numbers.prev,
.page-numbers.next{
display:none;
}
.themewidget{
margin-bottom: 40px;
}
.themewidget:last-child{
margin-bottom: 0px;
}
.themewidget li{
margin-bottom: 10px;
}
.themewidget li:last-child{
margin-bottom: 0;
}
.widget-title{
padding-bottom: 5px;
margin-bottom: 20px;
color: #004097;
border-bottom: solid 1px #004097;
font-size: 1.2rem;
}
.sidebar{
}
.page_main  > a,
.post_main  > a,
.page_main  p > a,
.post_main  p > a{
color: #004ea2;
text-decoration: underline;
}
.page_main  a:hover,
.post_main  a:hover{
text-decoration: none;
}
.page_main  p,
.page_main  table,
.post_main  p,
.post_main  table{
margin-bottom:1em;
}
.page_main  p:last-child,
.page_main  table:last-child,
.post_main  p:last-child,
.post_main  table:last-child{
margin-bottom:0;
}
.page_main  h1,
.post_main  h1{
font-size:2.1em;
font-weight:700;
border-bottom:1px solid #dddddd;
padding-bottom:10px;
margin-bottom:30px;
margin-top: 60px;
margin-bottom: 20px;
text-align: left;
}
.page_main  h2,
.post_main  h2 {
font-size: 24px;
font-size: 1.5em;
background: #d9eef8;
padding: 20px;
color: #2a79ad;
line-height: 1;
margin-top: 3em;
margin-bottom: 1em;
font-weight: 700;
font-size: 24px;
border-radius: 10px;
}
.page_main  h3,
.post_main  h3{
font-size: 20px;
font-size: 1.4em;
font-weight: 600;
color: #2a79ad;
margin-top: 2em;
margin-bottom: 1em;  line-height: 140%;
}
.page_main  h4,
.post_main  h4{
font-size: 1.2em;
margin-top: 1em;
padding-left: 0.5em;
border-left: 0.2em solid;
margin-bottom: 1em;
color: #2a79ad;
}
.page_main  h5,
.post_main  h5{
font-size:1em;
font-weight: 700;
}
.page_main  h6,
.post_main  h6{
font-size:1em;
margin-bottom:10px;
}
.page_main  h1:first-child,
.post_main  h1:first-child,
.page_main  h2:first-child,
.post_main  h2:first-child,
.page_main  h3:first-child,
.post_main  h3:first-child,
.page_main  h4:first-child,
.post_main  h4:first-child,
.page_main  h5:first-child,
.post_main  h5:first-child,
.page_main  h6:first-child,
.post_main  h6:first-child{
margin-top: 0;
}
.page_main  p strong,
.post_main  p strong{
font-weight:800;
font-size:1.2em;
}
.page_main  table,
.post_main  table{
}
.post_main ul{
margin-bottom: 2em;
list-style: disc;
padding-left: 1.5em;
}
.page_main ul:last-child,
.post_main ul:last-child{
margin-bottom: 0;
}
.page_main li,
.post_main li{
margin-bottom: 0.5em;
}
.page_main li:last-child,
.post_main li:last-child{
margin-bottom: 0;
}
.page_main ol,
.post_main ol{
list-style: decimal;
padding-left: 2em;
}
.search_word{
padding-bottom: 10px;
margin-bottom: 40px;
color: #2979ad;
border-bottom: solid 1px #004097;
font-size: 1.4rem;
font-weight: 700;
}
.form_table{
width: 100%;
}
.form_table,
.form_table tr,
.form_table th,
.form_table td{
margin: auto;
max-width: 800px;
border:none;
vertical-align: top;
}
.form_table th{
width: 200px;
}
.form_table td{
}
.submit td{
text-align: center;
}
.wp-block-table{
margin-bottom: 30px;
}
.wp-block-button{
color: #fff;
}
.wp-block-button__link {
color: #fff;
background-color: #004ea2;
border: none;
border-radius: 28px;
box-shadow: none;
cursor: pointer;
display: inline-block;
font-size: 18px;
padding: 12px 24px;
text-align: center;
text-decoration: none;
overflow-wrap: break-word;
}
.wpcf7-form-control-wrap{
width: 100%;
}
@media (max-width: 700px){
.page_main h1, .post_main h1 {
font-size: 24px;
padding-bottom: 15px;
margin-bottom: 15px;
}
}
.single_content > section{
margin-bottom: 3em;
}
.single_content > section:last-child{
margin-bottom: 0;
}
.single_content .post_main > ul{
border: 2px solid #A2DEF4;
padding: 0.5rem;
display: inline-block;
min-width: 50%;
margin-bottom: 1rem;
color: #3E3E3E;
list-style: none;
}
.single_content .post_main > ul li {
margin-bottom: 0.5rem;
position: relative;
padding-left: 21px;
}
.single_content .post_main  > ul li:before {
content: "";
width: 16px;
height: 19px;
position: absolute;
left: 0;
top: 4px;
background-image: url(//hataluck.jp/wp-content/themes/basetemplate/images/ul-ic.svg);
background-size: contain;
background-repeat: no-repeat;
background-position-y: center;
display: inline-block;
vertical-align: middle;
margin-right: 0.5rem;
}
.single_content .post_main ul > li:last-child {
margin-bottom: 0;
}
.single_content .wp-block-quote{
position: relative;
padding: 1.5rem 2rem 1rem 3.5rem;
background-color: #f5f5f5;
border-left: 12px solid #d9eef9;
}
.contact_table{
margin: auto;
max-width: 800px;
width: 100%;
}
.contact_table,
.contact_table tr,
.contact_table td,
.contact_table th{
box-sizing: border-box;
border:none;
vertical-align: top;
}
.contact_table th{
text-align: right;
display: flex;
align-items: center;
justify-content: flex-end;
}
.contact_table th p {
text-align: left;
margin: 0;
}
.form_privacypolicy p{
font-size: 14px;
}
.form_privacypolicy a{
text-decoration: underline;
display: inline-block;
}
.form_privacypolicy a:hover{
text-decoration: none;
}
.page_main .form_privacypolicy h5 {
margin-bottom: 10px;
}
@media screen and (max-width: 640px){
.contact_table,
.contact_table tr,
.contact_table td,
.contact_table th{
display: block;
width: 100%;
text-align: left;
padding: 0;
}
.contact_table td{
padding-bottom: 10px;}
.contact_table th{
padding-bottom: 0;
}
}
.contact_table .requied{
font-size: 12px;
background-color: #FF0004;
color: #fff;
display: inline-block;
padding: 0 5px;
margin-left: 10px;
}
.contact_table form, 
.contact_table input,
.contact_table textarea{
border: solid 1px #ccc; 
}
.contact_table input[type="submit"] {
margin: auto;
display: block;
background-color: #0167e6;
color: #fff;
border: solid 2px #0167e6;
}
.contact_table input[type="submit"]:hover{
background-color: #fff;
color: #0167e6;
}
.contact_table input[type="date"]{
font-size: 16px;
padding: 3px 3px;
border: solid 1px #ccc;
}
.contact_table select {
font-size: 16px;
padding: 5px;
border: solid 1px #ccc; 
}
.two_col_list > li{
margin-top: 40px;
}
.two_col_list > li:first-child{
margin-top: 0px;
}
@media screen and (min-width: 801px){
.two_col_list{
display: flex;
flex-wrap: wrap;
}
.two_col_list > li{
width: calc(50% - 20px);
margin-right: 40px;
}
.two_col_list > li:nth-child(-n + 2){
margin-top: 0;
}
.two_col_list > li:nth-child(2n){
margin-right: 0;
}
}
@media screen and (min-width: 801px){
.function_navi{
display: flex;
justify-content: center;
width: 100%;
margin-bottom: 40px;
}
.function_navi li{
box-sizing: border-box;
border-left: solid 1px;
width: 33.33%;
display: flex;
align-items: stretch;
}
.function_navi li:last-child{
border-right: solid 1px;
}
.function_navi li a{
padding: 15px;
width: 100%;
display: flex;
align-items: center;
justify-content: center;
box-sizing: border-box;
text-align: center;
}
}
@media screen and (max-width: 800px){
.function_navi{
width: 100%;
margin-bottom: 40px;
}
.function_navi li a{
position: relative;
padding-left:20px;
display: block;
}
.function_navi li a:before{
content: "";
position: absolute;
width: 0;
height: 0;
top: 8px;
left: 0;
margin: auto;
border-top: 8px solid #004ea2;
border-left: 5px solid transparent;
border-bottom: 0 solid transparent;
border-right: 5px solid transparent;
}
.function_navi li a br{
display: none;
}
}
.function_box{
padding:60px 30px;
border-radius: 10px;
}
.function_box h3{
font-size: 26px;
text-align: center;
font-weight: 700;
display: block;
margin-bottom: 60px;
padding: 0;
border: none;
color: inherit;
}
.page_main .function_box h4{ padding: 0;
border-left: NONE;
margin: auto;
color: #0072bc;
text-align: center;
font-weight: 500;
font-size:1.4em;
font-weight: 700;
}
.function_box + .function_box{
margin-top: 40px
}
.function_box .wp-block-columns > .wp-block-column{
background-color: #fff;
padding: 20px;
box-sizing: border-box;
border-radius: 10px;
position: relative;
}
.function_box .wp-block-columns > .wp-block-column.function_box_blank{
background:none;
padding: 0px;
}
.function_box .wp-block-columns > .wp-block-column.comingsoon:before{
content: "";
background-image: url(//hataluck.jp/wp-content/themes/basetemplate/images/comingsoon.svg);
width: 200px;
max-width: 38%;
height: 80px;
display: block;
position: absolute;
left: -20%;
right: 0%;
margin: auto;
top: -52px;
background-repeat: no-repeat;
background-position: bottom;
}
.function_box .wp-block-button {
display: flex;
justify-content: center;
margin-bottom: -15px;
color: #fff;
width: 100%
}
.function_box .wp-block-button a {
text-align: center;
font-size: 18px;
color: inherit;
overflow: hidden;
position: relative;
width: 100%;
margin: 0 15px;
margin-bottom: 15px;
display: block;
font-weight: 700;
background-color: #2979ad;
font-size: 16px;
border-radius: 10px;
max-width: 290px;
padding: 0.4em 1em;
}
.function_box .wp-block-button a:before {
content: "";
position: absolute;
top: 0;
left: -50%;
margin: auto;
display: block;
width: 100%;
height: 100%;
opacity: 0.11;
background-color: #fff;
transform: skewx(-40deg);
}
.post_head{
margin-bottom: 40px;
}
.post_title{
font-size: 2.4em;
margin: 10px 0;
font-weight: 600;
}
.post_download_content{
max-width: 700px;
margin: auto;
width: 100%;
}
.post_download_content .post_main{
text-align: center;
padding-bottom: 60px;
}
.post_thumbnail{
margin-bottom: 20px;
display: block;
width: 100%;
}
@media screen and (max-width: 800px){
.page_header .page_title {
font-size: 1.6em;
}
.post_title {
font-size: 1.5em;
}
.breadcrumbs {
margin-bottom: 30px;
}
#cv h3 {
font-size: calc((100vw - 40px) / 19);
}
}
.post_title + .postdate{
margin-top: 0;
}
#toc_container .toc_list > li{
margin-bottom: 3px;
}
#toc_container .toc_list > li:last-child{
margin-bottom: 0;
}
.case_content .post_main ul:first-of-type{
padding: 1em;
border: solid 2px #2979ad;
list-style: none;
display: block;
margin-bottom: 40px;
}
.case_content .post_main ul:first-of-type li{
padding-left: 1.5em;
position: relative;
}
.case_content .post_main ul:first-of-type li:before{
content: "";
background-image: url(//hataluck.jp/wp-content/themes/basetemplate/images/check.svg);
background-size: contain;
background-repeat: no-repeat;
background-position: center;
height: 1.6em;
width: 1em;
display: block;
position: absolute;
left: 0;
top: 0;
}
.voice_box{
display: flex;
align-items: center;
justify-content: space-between;
}
.voice_box .left{
display: flex;
align-items: center;
justify-content:center;
margin-right: 20px;
width: 120px;
}
.voice_box .right{
width: calc(100% - 140px);
background-color: #d9eef8;
border-radius: 5px;
padding: 1em;
box-sizing: border-box;
position: relative;
}
.voice_box .right:before{
content: "";
position: absolute;
display: block;
margin:auto;
border-top: 0px solid transparent;
border-right: 20px solid #d9eef8;
border-bottom: 15px solid transparent;
border-left: 0px solid transparent;
height: 0;
width: 0;
top: 0;
bottom: 0;
right: 99.5%;
}
.zenpen_btn{
margin-top: 40px;
}
.zenpen_btn a{
font-size: 27px;
color: inherit;
border-radius: 80px;
overflow: hidden;
position: relative;
margin: 0 15px;
margin-bottom: 15px;
padding: 25px;
display: block;
font-weight: 700;
background-color: #e75c00;
}
@media screen and (max-width: 600px){
.voice_box .left{
width: 20%;
}
.voice_box .right{
width: 77%;
}
.post_download_content .post_main {
padding-bottom: 20px;
}
}
@media screen and (max-width: 400px){
.page_header {
height: 130px;
}
}
.pickup_post_area h3{
border-bottom: 1px solid #000000;
margin-bottom: 1rem;
font-size: 18px;
font-weight: 600;
color: #2979ad;
padding-bottom: 5px;
}
.pickup_post_area {
background: #d9eef8;
padding: 20px;
border-radius: 10px;
}
.pickup_post_list{
flex-wrap: wrap;
display: flex;
gap:20px;
}
.pickup_post_list > li{
width: calc(33.33% - 20px * 2 / 3);
min-width: 200px;
}
.pickup_post_item{
}
.pickup_post_item .case_cat_list {
margin: 0;
margin-top: 10px;
}
@media screen and (max-width: 600px){
.pickup_post_list > li{
width: 100%;
}
.pickup_post_item{
display: flex;
}
.pickup_post_item h4{
font-size:inherit;
}
.pickup_post_item .case_cat_list {
margin: 0;
margin-bottom: -5px;
margin-top: 5px;
}
.pickup_post_item .listitem_box_img{
width: 140px;
margin-right: 10px;
flex-shrink: 0;
padding-top: 75px;
}
}
.editor_box{
border: solid 1px #d9eef8;
padding: 15px;
}
.editor_box_title{
display: flex;
flex-wrap: wrap;
justify-content: flex-start;
align-items: center;
gap:10px;
column-gap: 15px;
margin-bottom: 10px;
}
.editor_box_title img{
display: block;
width: 80px;
}
.editor_box_title p{
font-size: 1.2em;
font-weight: 700;
margin: 0;
color: #2979ad;
}
.postmeta{
display: flex;
gap:1em;
align-items: center;
flex-wrap: wrap;
border-bottom: solid 1px #ccc;
width: 100%;
}
.post_head .posttag {
margin-top: 10px;
}
.professor{
position:relative;
border: solid 1px #d9eef8;
padding: 15px;
display:flex;
justify-content:space-between;
margin-top: 100px;
margin-bottom: 3em;
}
.professor .kansyu{
position: absolute;
top: -24px;
left: -1px;
height: 24px;
background: #1595d9;
color: #ffffff;
font-size: 14px;
font-weight: 600;
padding-left: 10px;
padding-right: 10px;
text-align: center;
display: flex;
align-items: center;
border-radius: 3px 3px 0 0;
}
.professor .left{
width:150px;
}
.professor .left .namae{
position:absolute;
top:15px;
left:185px;
}
.professor .left .namae h5{
display:inline-block;
margin-right:15px;
color:#1595d9;
font-size:18px;
font-weight:600;
}
.professor .left .namae p{
display:inline-block;
}
.professor .right{
width:calc( 100% - 170px);
padding-top:40px;
}
@media screen and (max-width:950px){
.professor{
position:relative;
display:block;
}
.professor .left{
width:120px;
margin-bottom:15px;
}
.professor .right{
width:100%;
}
.professor .left .namae{
top:42px;
left:155px;
}
.professor .left .namae h5{
display:block;
margin-right:0px;
margin-bottom:10px;
}
.professor .left .namae p{
display:block;
}
.professor .right{
width:100%;
padding-top:0px;
}
}