@charset "utf-8";
/*
Theme Name: Project linked
*/


/*reset*/
/*******************************************************************/
html{box-sizing:border-box;overflow-y:scroll;-webkit-text-size-adjust:100%}*,:after,:before{background-repeat:no-repeat;box-sizing:inherit}:after,:before{text-decoration:inherit;vertical-align:inherit}*{padding:0;margin:0}audio:not([controls]){display:none;height:0}hr{overflow:visible}article,aside,details,figcaption,figure,footer,header,main,menu,nav,section,summary{display:block}summary{display:list-item}small{font-size:80%}[hidden],template{display:none}abbr[title]{border-bottom:1px dotted;text-decoration:none}a{background-color:transparent;-webkit-text-decoration-skip:objects}a:active,a:hover{outline-width:0}code,kbd,pre,samp{font-family:monospace,monospace}b,strong{font-weight:bolder}dfn{font-style:italic}mark{background-color:#ff0;color:#000}sub,sup{font-size:75%;line-height:0;position:relative;vertical-align:baseline}sub{bottom:-.25em}sup{top:-.5em}input{border-radius:0}[role=button],[type=button],[type=reset],[type=submit],button{cursor:pointer}[disabled]{cursor:default}[type=number]{width:auto}[type=search]{-webkit-appearance:textfield}[type=search]::-webkit-search-cancel-button,[type=search]::-webkit-search-decoration{-webkit-appearance:none}textarea{overflow:auto;resize:vertical}button,input,optgroup,select,textarea{font:inherit}optgroup{font-weight:700}button{overflow:visible}[type=button]::-moz-focus-inner,[type=reset]::-moz-focus-inner,[type=submit]::-moz-focus-inner,button::-moz-focus-inner{border-style:0;padding:0}[type=button]::-moz-focus-inner,[type=reset]::-moz-focus-inner,[type=submit]::-moz-focus-inner,button:-moz-focusring{outline:1px dotted ButtonText}[type=reset],[type=submit],button,html [type=button]{-webkit-appearance:button}button,select{text-transform:none}button,input,select,textarea{background-color:transparent;border-style:none;color:inherit}select{-moz-appearance:none;-webkit-appearance:none}select::-ms-expand{display:none}select::-ms-value{color:currentColor}legend{border:0;color:inherit;display:table;max-width:100%;white-space:normal}::-webkit-file-upload-button{-webkit-appearance:button;font:inherit}[type=search]{-webkit-appearance:textfield;outline-offset:-2px}img{width:auto;max-width:100%;height:auto;border-style:none;vertical-align:middle}i{vertical-align:middle}progress{vertical-align:baseline}svg:not(:root){overflow:hidden}audio,canvas,progress,video{display:inline-block}@media screen{[hidden~=screen]{display:inherit}[hidden~=screen]:not(:active):not(:focus):not(:target){position:absolute!important;clip:rect(0 0 0 0)!important}}[aria-busy=true]{cursor:progress}[aria-controls]{cursor:pointer}[aria-disabled]{cursor:default}::-moz-selection{background-color:#b3d4fc;color:#000;text-shadow:none}::selection{background-color:#b3d4fc;color:#000;text-shadow:none}ul,ol{list-style:none}i{font-style:normal}
a { color: #000; transition: all 0.2s ease-out; text-decoration: none;}
a.linktxt { color: #0000ff;}
a:hover { filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=60); opacity: 0.6;}
*:focus { outline: none;}
a[href^="tel:"], a.noclick { cursor: default; pointer-events: none;}


/*LAYOUT*/
/*******************************************************************/
html { font-size: 62.5%;}
body { -webkit-text-size-adjust: 100%; -webkit-overflow-scrolling: touch; height: 100%; font-family: 'Gothic MB101 Regular', '游ゴシック体', YuGothic, 'Yu Gothic Medium', sans-serif; font-size: 1.6rem; letter-spacing: 0.05em; font-feature-settings: 'palt' 1; color: #000;}
body.no-scroll { overflow: hidden;}
#container { position: relative; width: 100%;}
h1, h2, h3, h4, h5 { font-family: 'Gothic MB101 DemiBold', '游ゴシック体', YuGothic, 'Yu Gothic Medium', sans-serif;}
.serif { font-family: 'Reimin Medium', 'ヒラギノ明朝 Pro', 'Hiragino Mincho Pro', '游明朝体', 'Yu Mincho', YuMincho, serif; font-weight: 500;}


/*HEADER*/
/*******************************************************************/
#header { display: flex; align-items: flex-end; width: 100%; padding: 40px 3vw;}
#header h1 { width: 36%; max-width: 500px;}
#header a { font-family: 'Gothic MB101 DemiBold', '游ゴシック体', YuGothic, 'Yu Gothic Medium', sans-serif; font-weight: 700; color: #1362B1;}
#nav > ul { display: flex; margin-left: 1vw;}
#nav > ul > li { padding: 0 1vw;}
#nav > ul > li a { display: inline-block; border-bottom: 3px solid #1362B1; font-size: 1.4rem; line-height: 1.4; letter-spacing: 0; white-space: nowrap;}
#nav > ul > li span { display: inline-block; font-family: 'Gothic MB101 DemiBold', '游ゴシック体', YuGothic, 'Yu Gothic Medium', sans-serif; font-weight: 700; color: #CCC;}
#btn { margin-left: auto;}
#btn a { display: inline-block; padding: 4px 8px; border: 3px solid #1362B1; border-radius: 6px;}
#global { position:  absolute; top: 0; right: 3vw; display: flex; align-items: center;}
#gnav { display: flex; align-items: center; font-size: 1.3rem;}
#gnav li { margin-left: 12px;}
#gnav li:first-child a { padding: 6px 0 6px 24px; background: url("images/beginner.svg") left center no-repeat;}
#gnav .facebook a, #gnav .twitter a, #gnav .line a{ display: block; padding: 12px 16px 12px 40px; border-radius: 0 0 6px 6px; font-weight: 400; color: #FFF;}
#gnav .facebook a { background: #475993 url("images/facebook.svg") 12px center no-repeat;}
#gnav .twitter a { background: #2CA7E0 url("images/twitter.svg") 12px center no-repeat;}
#gnav .line a { background: #00b900 url("images/line.svg") 12px center no-repeat;}
#gnav .recruit a { display: block; height: 45px; padding: 8px 12px 0; background: #1362B1; border-radius: 0 0 6px 6px; font-weight: 400; line-height: 1.2; color: #FFF;}
#search { margin: 0 0.8vw 0 3vw;}
#search form { display: flex;}
#searchbox { padding: 2px 4px; border: 1px solid #1362B1; border-radius: 4px 0 0 4px;}
#searchbtn { padding: 2px 8px; background: #1362B1; border-radius: 0 4px 4px 0; color: #FFF;}
#open { display: none;}

#breadcrumb { margin: 0 3vw; font-size: 1.2rem;}
#breadcrumb + #title { margin-top: 24px;}

#mainimg { position: relative; max-width: 1200px; margin: 0 auto;}
#mainimg > img { width: 100%; height: 70vh; object-fit: cover; font-family: 'object-fit: cover';}
#mainimg figcaption { position: absolute; top: 8px; right: 8px; width: 24%; max-width: 160px;}
#title { margin-bottom: 6vh; padding: 0;}
#title section { width: 100%; max-width: 1200px; padding: 3vh 6vw; text-align: center; background: rgba(0,141,96,.9); color: #FFF;}
#title section h1 { font-size: 4rem; line-height: 1.4;}
#title #mainimg .name { position: absolute; top: 0; left: 0; padding: 16px 32px; background: #FFF; border: 1px solid #EEE; font-size: 2rem; font-family: 'Gothic MB101 DemiBold', '游ゴシック体', YuGothic, 'Yu Gothic Medium', sans-serif; font-weight: 700;}
#title p { position: relative; display: inline-block; padding: 0 56px; font-size: 2rem;}
#title p:before, #title p:after { content: ''; position: absolute; top: 50%; display: inline-block; width: 48px; height: 1px; background-color: #FFF;}
#title p:before { left: 0;}
#title p:after { right: 0;}


/*FOOTER*/
/*******************************************************************/
#banner { padding: 6vh 3vw; background: #E5ECF4;}
#banner h2 { padding-bottom: 3vh; text-align: center; font-size: 3.2rem; color: #2B85D4;}
#banner h2::before, #banner h2::after { content: ''; display: inline-block; width: 80px; height: 3px; margin: 0 16px; vertical-align: middle; background: #2B85D4;}
#banner ul + h2 { margin-top: 6vh;}
#banner ul { display: flex; flex-wrap: wrap; justify-content: center; align-items: center;}
#banner li { padding: 1vw;}
#banner li p { padding: 8px 8px 0; text-align: center; background: #FFF; font-weight: 700; color: #000;}
#banner li a { display: block; color: #000;}
#banner li img { width: 100%;}
#footer { position: relative; background: #1362B1; color: #FFF;}
#footer a { color: #FFF;}
#footercontents { display: flex; justify-content: space-between; align-items: center; padding: 6vh 3vw 0;}
#footernav ul { display: flex; flex-wrap: wrap; justify-content: center;}
#footernav li { padding: 8px; font-size: 1.3rem;}
#chatbot { position: fixed; bottom: 90px; right: 20px; width: 160px; z-index: 40;}
#pagetop { display: none; position: fixed; bottom: 20px; right: 40px; z-index: 40;}
.sns { text-align: center;}
.sns dl { display: inline-block;}
.sns dt { padding-bottom: 4px; font-size: 1.2rem; font-family: 'Gothic MB101 DemiBold', '游ゴシック体', YuGothic, 'Yu Gothic Medium', sans-serif; font-weight: 700;}
.a2a_default_style a { float: none!important; display: inline-block;}
#copyright { padding: 6vh 3vw 120px; text-align: center; font-size: 1.1rem;}


/*CONTENTS*/
/*******************************************************************/
article { position: relative;}
section { position: relative; max-width: 1280px; margin: 0 auto;}
section h2 { margin-bottom: 32px; font-size: 3.2rem; line-height: 1.4;}
section h3 { margin-bottom: 24px; font-size: 2.4rem; line-height: 1.4;}
section h4 { margin-bottom: 24px; font-size: 2rem; line-height: 1.4;}
section h5 { margin-bottom: 16px; font-size: 1.8rem; line-height: 1.4;}
section h6 { margin-bottom: 16px; font-size: 1.6rem; line-height: 1.4;}
section * + h2, section * + h3, section * + h4, section * + h5, section * + ul:not(.keyword), section * + ol, section * + table, * + .row, * + .movie, * + .colmun, * + .column, * + .box { margin-top: 6vh;}
section p { line-height: 2;}
section p:not(:last-child) { margin-bottom: 32px;}
section table { width: 100%;}
section th { padding: 16px;}
section td { padding: 16px;}
section ul:not(.keyword):not(.list) { list-style: outside disc; margin-left: 2em;}
section ol { list-style: outside decimal; margin-left: 2em;}
section .alignright { float: right; margin-left: 3em;}
section .alignleft { float: left; margin-right: 3em;}
section .aligncenter { display: block; margin-left: auto; margin-right: auto;}
section .size-thumbnail { max-width: 450px;}
figure img { width: 100%; max-width: initial;}
section figure figcaption { padding-top: 8px; text-align: center; font-size: 1.1rem; color: #333;}
section figure + p { padding-top: 8px;}
.fade { opacity: 0; transform: translateY(30px); transition: opacity 2s cubic-bezier(.215,.61,.355,1), transform 2s cubic-bezier(.215,.61,.355,1); transition-timing-function: cubic-bezier(.215,.61,.355,1); transition-delay: .1s;}
.fade.inview { opacity: 1; transform: translateY(0);}
.btn { padding-top: 6vh; text-align: center;}
.btn a { display: inline-block; padding: 16px 40px; background: #1362B1; border-radius: 4px; font-family: 'Gothic MB101 DemiBold', '游ゴシック体', YuGothic, 'Yu Gothic Medium', sans-serif; font-weight: 700; color: #FFF;}
.btn a::after, .more::after { content: ''; display: inline-block; width: 7px; height: 7px; margin-left: 8px; vertical-align: middle; border-top: 2px solid #FFF; border-right: 2px solid #FFF; -webkit-transform: rotate(45deg); transform: rotate(45deg);}
.more::after { border-color: #000;}
.btn a:hover { transform: translateY(5px);}
.row { display: flex; justify-content: space-between; align-items: flex-start;}
.row > figure { width: 40%;}
.row > div { width: 56%;}
.column { display: flex; justify-content: space-between; margin-left: -16px; margin-right: -16px; text-align: center;}
.column > * { margin: 0 16px;}
.column p { text-align: left;}
.order { order: 1;}
.views { padding-left: 20px; background: url("images/view.svg") left center no-repeat; font-size: 1rem; letter-spacing: 0; color: #999;}
.mb { margin-bottom: 32px;}
.sp { display: none;}

.keywords { display: flex; align-items: center; margin: 6vh 0;}
.keyword li { display: inline-block; margin: 4px 0 4px 8px;}
.keyword li a { display: inline-block; padding: 4px 16px; vertical-align: middle; background: #FFF28A; border: 1px solid #CCC; color: #000;}

.paging { display: -webkit-flex; display: flex; -webkit-justify-content: center; justify-content: center; -webkit-align-items: center; align-items: center; margin-top: 6vh; font-size: 1.4rem;}
.nav-numbers { padding: 16px;}
.pagination a { display: inline-block; margin: 2px; padding: 0 14px;}
.pagination a:not(.prev):not(.next):not(.top) { padding: 8px 14px; background-color: #DBDBDB; color: #FFF;}
.pagination span { display: inline-block; margin: 2px; padding: 8px 14px;}
.pagination span.current { background-color: #000; color: #FFF;}
.prev, .next { margin: 0 16px!important;}
.screen-reader-text { display: none;}

.comments-area { clear: both; margin-top: 9vh; padding-top: 9vh; border-top: 2px solid #000;}
.comments-list, .comments-meta-list { margin: 0!important; list-style: none!important;}
.comments-list > li { margin-bottom: 3vh; padding-bottom: 3vh; border-bottom: 1px dashed #CCC;}
.comments-list .children { margin: 3vh 0 0 3vw!important; list-style: none!important;}
.comments-meta-list { display: flex; flex-wrap: wrap; align-items: center; margin: 0 0 8px; list-style: none;}
.comments-meta-list > *:not(:first-child) { padding-left: 16px;}
.comments-author-name { font-family: 'Gothic MB101 DemiBold', '游ゴシック体', YuGothic, 'Yu Gothic Medium', sans-serif; font-weight: 700;}
.comments-date { font-size: 1.2rem;}
.comments-reply { text-align: right;}
.comments-reply a { display: inline-block; padding: 1px 8px; background: #EEE; border: 1px solid #CCC; border-radius: 6px; font-size: 1.2rem;}
.comment-respond { margin-top: 6vh; padding: 6vh 6vw; border: 1px solid #CCD3D0; border-radius: 6px;}
#body h3.comment-reply-title { padding: 0 0 8px; text-align: center; border-left: none; border-bottom: 2px solid #000;}
.comment-form { max-width: 980px; margin: 0 auto;}
.comment-form p.comment-form-comment, .comment-form p.comments-form-email, .comment-form p.comments-form-author { display: flex;}
.comment-form label { width: 30%;}
.comment-form input[type*="text"], .comment-form input[type*="email"], .comment-form textarea { width: 40%; border: 1px solid #CCC;}
.comment-form textarea { width: 70%;}
.comment-form input[type*="submit"] { display: inline-block; padding: 4px 16px; background: #EEE; border: 1px solid #CCC; border-radius: 6px;}
.form-submit { text-align: center;}

.title { position: relative; display: inline-block; padding: 16px 3vw; margin-top: -50%; z-index: 10;}
.title::after { content: ''; position: absolute; top: 0; right: -60px; display: inline-block; width: 60px; height: 100%;}
.title h2 { font-size: 2.8rem; line-height: 1.2; color: #FFF;}
.title i { font-family: 'Gothic MB101 DemiBold', '游ゴシック体', YuGothic, 'Yu Gothic Medium', sans-serif; font-weight: 700; letter-spacing: 0; color: #FFF;}
.balloon { position: absolute; top: -64px; left: 1.5vw; display: flex; justify-content: center; align-items: center; width: 281px; height: 74px; padding-bottom: 22px; text-align: center; background: url("images/serif.svg") 0 0 no-repeat; font-size: 1.8rem; font-family: 'Gothic MB101 DemiBold', '游ゴシック体', YuGothic, 'Yu Gothic Medium', sans-serif; font-weight: 700; letter-spacing: 0; line-height: 1.2;}
.catch { margin-bottom: 32px; padding: 16px; background: rgba(255,255,255,.6); font-family: 'Gothic MB101 DemiBold', '游ゴシック体', YuGothic, 'Yu Gothic Medium', sans-serif; font-weight: 700;}
.titlebanner { display: flex; flex-wrap: wrap; justify-content: center; margin: 0 3vw 56px;}
.titlebanner > div { display: flex; justify-content: center; padding: 4px;}
.toplist .catch { position: absolute; top: -56px; right: 32px; width: 46%; margin: 0; padding: 16px 32px; background: #FFF; border-radius: 50px; box-shadow: 0 1px 4px rgba(0,0,0,.1); font-size: 1.4rem; color: #1362B1;}
.toplist { position: relative; margin-right: 8vw; box-shadow: 10px 0 20px rgba(0,0,0,.2);}
.toplist::after { content: ''; position: absolute; bottom: 0; left: 0; width: 100%; height: 64px; background: linear-gradient(to bottom, rgba(0,0,0,0) 0%, rgba(0,0,0,0.1) 100%);}
.toplist .list { width: 100%; padding: 1.5vw 3vw 114px;}
.morebtn { position: absolute; top: 0; right: -7vw; height: 100%;}
.morebtn a { position: sticky; top: 70px; display: flex; justify-content: center; align-items: center; width: 7vw; height: 240px; padding: 8px; background: #1892F5; border-radius: 0 6px 6px 0; font-size: 2rem; font-family: 'Gothic MB101 DemiBold', '游ゴシック体', YuGothic, 'Yu Gothic Medium', sans-serif; font-weight: 700; color: #FFF;}
.morebtn a::after { content: ''; display: inline-block; width: 14px; height: 14px; margin: 8px; vertical-align: middle; border-top: 2px solid #FFF; border-right: 2px solid #FFF; -webkit-transform: rotate(45deg); transform: rotate(45deg);}
#pickup .morebtn a { background: #1362B1;}
#special .morebtn a { background: #FFBA45;}
#linked .morebtn a { background: #1892F5;}
#wellbeing .morebtn a { background: #0BA9C2;}
#coronavirus .morebtn a { background: #FF3946;}
#beyondcorona .morebtn a { background: #FF3946;}


main { position: relative;/* display: flex; justify-content: space-between;*/ padding: 6vw;}
main#pickup, main#special, main#linked, main#wellbeing, main#coronavirus, main#tie, main#beyondcorona { margin-top: 64px;}
main article { position: static; /*width: 78%;*/}
main .title { position: absolute; top: 0; left: 0; margin-top: -20px;}
main#page { padding: 6vw 0;}
main#page article { width: 100%;}
main#page header { margin: 0 8vw 6vh; text-align: center;}
main#page header h2 { font-size: 3.2rem; font-weight: 700;}
main#page header h2::after { content: ''; display: block; width: 80px; height: 4px; margin: 8px auto 0; background: #1362B1;}
/*
#aside { width: 18%;}
#aside h4 { margin-bottom: 8px; padding: 16px; text-align: center; background: rgba(255,255,255,.6);}
#aside .box { margin-bottom: 6vh;}
.archive-list a, .archive-list span { position: relative; display: block; padding: 16px 32px 16px 8px; border-bottom: 1px solid #333; opacity: 1;}
.archive-list a::after, .archive-list span::after { content: ''; position: absolute; top: 50%; right: 0; transform: translateY(-50%); display: block; width: 7px; height: 7px; margin: 8px; vertical-align: middle; border-top: 2px solid #333; border-right: 2px solid #333; -webkit-transform: rotate(45deg); transform: rotate(45deg);}
.archive-list a:hover, .archive-list span:hover { background: rgba(255,255,255,.6);}
.archive-list > li:not(.on) > ul { display: none;}
.month-archive-list > li a { text-indent: 2em; border-bottom: none;}
.wsbl_line .wp_social_bookmarking_light_img { width: 88px; height: 20px;}
.tagcloud a { display: inline-block; margin: 8px 4px 0 0; padding: 4px; background: #FFF; border: 1px solid #333; font-size: 1.4rem!important; color: #000;}
*/
#aside { padding: 6vh 3vw; text-align: center;}
#aside h4 { display: inline-block; margin-bottom: 16px; padding-top: .4em; background-position: top left -6px; background-repeat: repeat-x; background-size: 1.5em .3em; background-image: radial-gradient(.15em .15em at center center,orange,orange 100%,transparent); letter-spacing: 10px; font-size: 1.8rem;}
.tagcloud a { display: inline-block; margin: 0 4px 16px; padding: 4px 16px; background: #FFF; border-radius: 4px; font-size: 1.4rem!important; font-weight: 700; color: #1362B1!important;}

#body { padding: 0 8vw 6vh;}
#body h2 { padding-bottom: 8px; border-bottom: 1px solid #000; color: #000;}
#body h3 { padding-left: 16px; border-left: 6px solid #000; color: #000;}
#body h4, #body h5 { color: #000;}
#body .date .views { margin-left: 16px;}
#body .colmun { padding: 32px; background: #F7F8F7; color: #000;}
#body .box { position: relative; padding: 32px; border: 1px solid #1362B1; border-radius: 6px; color: #000;}
#body .box h4 { position: absolute; top: 0; left: 50%; padding: 4px 24px; text-align: center; background: #FFF; transform: translate(-50%, -50%); color: #1362B1;}
#body .movie { padding: 6vh 10vw; border-top: 1px solid #CCC; border-bottom: 1px solid #CCC;}
#body .yt { position: relative; width: 100%; padding-top: 56.25%;}
#body .yt iframe { position: absolute; top: 0; left: 0; width: 100%; height: 100%;}
#body .movie p { text-align: center; padding-top: 16px; font-size: 1.4rem;}
#body .align-center { align-items: center;}
#body .external-link { margin: 0;}
#body .external-link li a { display: inline-block; padding: 4px 16px; background: #1362B1; border-radius: 4px; font-size: 1.4rem; color: #FFF;}
#body .external-link li a::after { content: ''; display: inline-block; width: 6px; height: 6px; margin-left: 4px; vertical-align: middle; border-top: 2px solid #FFF; border-right: 2px solid #FFF; transform: rotate(45deg);}

.ad { margin-bottom: 24px; text-align: center;}
.ad a { display: inline-block; position: relative; height: 50px; line-height: 50px; text-align: center; padding: 0 24px; font-size: 2rem; background: #185da5; color: #FFF;}
.ad a:before, .ad a:after { position: absolute; content: ''; width: 0px; height: 0px; z-index: 1;}
.ad a:before { top: 0; left: 0; border-width: 25px 0px 25px 15px; border-color: transparent transparent transparent #fff; border-style: solid;}
.ad a:after { top: 0; right: 0; border-width: 25px 15px 25px 0px; border-color: transparent #fff transparent transparent; border-style: solid;}

#catchcopy { position: relative; margin: 0 3vw; padding: 24px 3vw; text-align: center; background: #F8F8F8; font-weight: 700;}
#catchcopy::before { content: ''; display: block; position: absolute; top: 0; left: 0; width: 32px; height: 32px; border-top: 2px solid #1362B1; border-left: 2px solid #1362B1;}
#catchcopy::after { content: ''; display: block; position: absolute; bottom: 0; right: 0; width: 32px; height: 32px; border-bottom: 2px solid #1362B1; border-right: 2px solid #1362B1;}
#catchcopy + article { margin-top: 48px;}

#line { display: flex; justify-content: center; margin: 24px 3vw!important; color: #FFF;}
#line h2 { display: flex; align-items: center; margin: 0!important; padding: 16px; background: #1362B1; border-radius: 4px 0 0 4px; font-size: 1.8rem; color: #FFF!important;}
#line figure { display: flex; justify-content: center; align-items: center; padding: 8px 16px; background: #FFF; border: 4px solid #1362B1; border-radius: 0 4px 4px 0;}
#line figure img { max-width: 300px;}

#pickup { background: linear-gradient(to right, #cfffec 0%, #bbe4ff 100%);}
#pickup.search { background: #FAFAFA;}
#pickup .title { background: #1892F5;}
#pickup .title::after { background: #1362B1;}
#special { background: linear-gradient(to right, #fffff8 0%, #fffad6 100%);}
#special .title { background: #FF8300;}
#special .title::after { background: #FFBA45;}
#linked { background: linear-gradient(to right, #e4f6ff 0%, #d4fffd 100%);}
#linked .title { background: #1362B1;}
#linked .title::after { background: #1892F5;}
#wellbeing { background: linear-gradient(to right, #FBFFDB 0%, #D1FFEB 100%);}
#wellbeing .title { background: #05C7D5;}
#wellbeing .title::after { background: #0BA9C2;}
#coronavirus { background: linear-gradient(to right, #FCECF3 0%, #FFE1D2 100%);}
#coronavirus .title { background: #FF3946;}
#coronavirus .title::after { background: #F51827;}
#beyondcorona { margin-top: 80px; background: linear-gradient(to right, #FCECF3 0%, #FFE1D2 100%);}
#beyondcorona .title { background: #FF3946;}
#beyondcorona .title::after { background: #F51827;}
#topics { background: linear-gradient(to right, #00b992 0%, #00be77 100%);}
#tag { padding: 80px 8vw; background: linear-gradient(to right, #cfffec 0%, #bbe4ff 100%);}
#tag header h2 { margin-bottom: 32px; padding: 8px 16px; background: rgba(255,255,255,.6); border: 1px solid #1362B1;}

#related { padding: 6vh 8vw;}
#related > h3 { padding: 0 0 8px; text-align: center; border-left: none; border-bottom: 2px solid #000;}
#related .list { margin: 0;}
#related .list li:not(.fill) { width: calc(100% / 5 - 8px); box-shadow: none;}
#related .list figure { border: 1px solid #CCC;}
#related .list li figcaption { width: 30%; top: 0;}
#related .list .meta { font-size: 1.2rem;}
#related .list li h3 { font-size: 1.6rem;}

.list { display: flex; flex-wrap: wrap; justify-content: space-between; width: 100%;}
.list::before, .list::after, .fill { order: 1; content: ''; display: block; width: calc(100% / 5 - 1vw); border: none!important;}
.list li:not(.fill) { position: relative; display: flex; width: calc(100% / 5 - 1vw); margin: 1vw 0; background: #FFF; box-shadow: 2px 2px 0 rgba(0,0,0,.1);}
.list li > a { display: flex; flex-direction: column; width: 100%;}
.list li figure { position: relative; text-align: center; padding-top: 50%;}
.list li figure > img { position: absolute; top: 0; left: 0; width: 100%; height: 100%; object-fit: cover; font-family: 'object-fit: cover';}
.list li figcaption { position: absolute; top: 8px; right: 8px; width: 34%; z-index: 1;}
.list li > a > div { padding: 16px;}
.list li h3 { margin: 0!important; font-size: 1vw;}
.list li p { line-height: 1.4; font-family: 'Gothic MB101 DemiBold', '游ゴシック体', YuGothic, 'Yu Gothic Medium', sans-serif; font-weight: 700;}
.list .cat { position: absolute; top: 0; left: 0; z-index: 1;}
.list .cat a, .list .cat span { display: inline-block; padding: 8px; background: #1362B1; font-size: 1.2rem; letter-spacing: 0; color: #FFF;}
.list .cat span.pickup { background: #1362B1;}
.list .cat span.special { background: #FFBA45;}
.list .cat span.linked { background: #1892F5;}
.list .cat span.wellbeing { background: #0BA9C2;}
.list .meta { display: inline-block; margin-bottom: 8px; padding: 2px 8px; text-align: center; background: #FFF28A; border: 1px solid #CCC; font-size: 0.8vw; font-family: 'Gothic MB101 DemiBold', '游ゴシック体', YuGothic, 'Yu Gothic Medium', sans-serif; font-weight: 700; line-height: 1.3;}
.list .views { float: right;}

@media only screen and (min-width: 1201px){
.list.alt::before, .list.alt::after { width: calc(100% / 3 - 1vw);}
.list.alt li { width: calc(100% / 3 - 1vw);}
.list.alt li > a { flex-direction: row;}
.list.alt li figure { width: 45%; padding-top: 24%;}
.list.alt li > a > div { width: 55%;}
.list.alt li h3 { font-size: 1vw;}
.list.alt li h3 br { display: none;}
.list.alt .meta { font-size: 0.8vw;}
}

.list.alt2 { padding-bottom: 3vw;}
.list.alt2 li { border: 5px solid #1362B1;}
.list.alt2 li h3 { padding: 16px; font-size: 1.3vw; color: #1362B1;}
.list.alt2 .meta { display: flex; justify-content: space-between; align-items: center; margin-bottom: 0; padding-bottom: 6px; background: #1362B1; border: none; color: #FFF;}
.list.alt2 .linked { font-size: 0.8vw;}
.list.alt2 .name { font-size: 1.2vw;}
.list.alt2 .more::after { border-color: #FFF;}

.thumblist { margin-left: 0!important;}
.thumblist > li { position: relative; display: -webkit-flex; display: flex; -webkit-justify-content: space-between; justify-content: space-between; padding: 32px 0; border-top: 1px dashed #CCC;}
.thumblist > li li { display: inline-block; padding: 5px;}
.thumb { display: inline-block; width: 16%;}
.circle { border-radius: 50%; overflow: hidden; -webkit-backface-visibility: hidden; -webkit-transform: translate3d(0, 0, 0);}
.rep a { display: block; padding: 3px; text-align: center; border: 1px solid #999; font-size: 12px;}
.rep i { font-size: 11px; font-weight: bold;}
.text { width: 80%;}
.text .external-link { padding-top: 2%;}
.thumbheader { padding-bottom: 2%; font-size: 16px; font-weight: bold;}
.thumbbody + ul { margin-top: 2%;}

.movielink { position: fixed; left: 50%; bottom: 30px; transform: translateX(-50%); text-align: center; z-index: 30;}
.movielink a { display: inline-block; margin: 0 auto; padding: 16px 32px; text-align: center; background: rgb(216,0,0); background: linear-gradient(0deg, rgba(216,0,0,1) 0%, rgba(255,0,0,1) 100%); border-radius: 4px; font-size: 2.4rem; font-weight: 700; color: #FFF;}
.movielink a::before { content: ''; display: inline-block; width: 53px; height: 37px; margin-right: 16px; vertical-align: middle; background: url("images/youtube.svg") center no-repeat;}

.required { float: right; padding: 2px 4px; background: #E85959; font-size: 1.1rem; font-weight: 700; color: #FFF;}
.form th { text-align: left; vertical-align: top; width: 25%;}
.form input[type="text"], .form input[type="tel"], .form input[type="email"] { width: 100%; background: #FFF; border: 2px solid #CBCBCB; padding: 10px 16px; vertical-align: middle;}
.form input[type="file"] { width: 100%; margin: 4px 0;}
.form select { padding: 10px 48px 10px 16px; background: #FFF; border: 2px solid #CBCBCB;}
.form textarea { width: 100%; min-height: 250px!important; background: #FFF; border: 2px solid #CBCBCB; padding: 10px 16px;}
.submit { margin-bottom: 40px; text-align: center;}
.submit input[type="submit"] { display: inline-block; width: 100%; max-width: 260px; margin: 0 16px; padding: 16px 32px; background: #1362B1; border-radius: 5px; font-size: 2rem; font-weight: 700; color: #FFF;}
.submit input[type="submit"].disabled { background: #999;}
.submit input[type="submit"]:not(.disabled):hover { opacity: 0.7;}
.submit input[type="button"] { display: inline-block; width: 100%; max-width: 260px; margin: 0 16px; padding: 16px 32px; background: #999; border-radius: 5px; font-weight: 700; color: #FFF;}
.wpcf7c-conf { background-color: #DDD!important;}
.form ::-webkit-input-placeholder { font-weight: 400; color: #CECECE;}
.form ::-moz-placeholder { font-weight: 400; color: #CECECE;}
.form :-ms-input-placeholder { font-weight: 400; color: #CECECE;}

#ranking { padding: 6vh 3vw; background: #0092D8;}
#ranking h2 { margin-bottom: 24px; text-align: center; color: #FFF;}
#ranking h2 span { border-bottom: 3px double #FFF;}
#ranking ol { counter-reset: item;}
#ranking li::after { counter-increment: item; content: counter(item); position: absolute; top: 0; left: 0; display: flex; justify-content: center; align-items: center; width: 28px; height: 28px; background: #0092D8; border-radius: 0 0 4px 0; font-weight: bold; color: #FFF;}

.please { position: relative; display: inline-block; margin-top: 80px; padding: 24px; background-color: #fff; border: solid 2px #185da5; border-radius: 8px;}
.please:before, .please:after { content: ""; position: absolute; top: 100%; left: 50%; -webkit-transform: translateX(-50%); transform: translateX(-50%);}
.please:before { border: solid 12px transparent; border-top: solid 12px #185da5;}
.please:after { border: solid 14px transparent; border-top: solid 14px #fff; margin-top: -5px;}
#body .please h3 { padding-left: 0; text-align: center; border-left: none; font-size: 1.8rem; color: #185da5;}


/*Tie-up*/
#tie { background: #F8F8F8;}
#tie .title { background: #1892F5;}
#tie .title::after { background: #1362B1;}
#tie h1 { padding: 3vh 6vw; text-align: center; background: #FFF; font-size: 4rem; line-height: 1.4;}
#tie h1 img { width: 100%; height: 160px; object-fit: contain; font-family: 'object-fit: contain';}
#tie .catchcopy { margin-bottom: 6vw; box-shadow: 0 0 20px rgba(0,0,0,.1);}
#tie .catchcopy p { padding: 24px; text-align: center; background: #004293; font-size: 1.8rem; color: #FFF;}
#tie .catchcopy a { color: #FFF;}
#tie .list:not(.related) li figure { padding-top: 40%; border-bottom: 1px solid #EEE;}
#tie .list:not(.related) li figure > img { left: 5%; width: 90%; object-fit: contain; font-family: 'object-fit: contain';}
#tie h2 { position: relative; padding: 8px 24px; background: #004293; color: #FFF;}
#tie h2::after { content: ''; position: absolute; top: 0; left: 0; width: 0; height: 0; border-style: solid; border-width: 16px 16px 0 0; border-color: #f8f8f8 transparent transparent transparent;}
#overview { padding: 6vh 8vw;}
#tie #related { background: #FFF;}
#tie #related .list li:not(.fill) { background: #004293;}
#tie #related .list li a h3 { color: #FFF;}
#tie #related .list li figure { border: none;}
#tie #related > h3, #overview > h3 { padding: 0 0 8px; text-align: center; border-left: none; border-bottom: none; color: #004293;}
#tie #related > h3::after, #overview > h3::after { content: ''; display: block; width: 100px; height: 4px; margin: 16px auto 0; background: #004293;}



@media only screen and (max-width: 1600px){
.morebtn a { -webkit-writing-mode: vertical-rl; -ms-writing-mode: tb-rl; writing-mode: vertical-rl;}
.morebtn a br { display: none;}
.morebtn a::after { margin: 8px 8px 0 0;}
}



@media only screen and (max-width: 1200px){
#header { padding: 16px 3vw;}
#nav { pointer-events: none; position: fixed; top: -100vh; left: 0; width: 100%; height: 100vh; margin: 0; background: #FFF; opacity: 0; overflow: auto; z-index: 50; transition: .3s ease-in-out;}
#nav > ul:not(#gnav) { display: block; min-width: 300px; margin: 0 auto 16px; padding-bottom: 16px; border-bottom: 1px solid #CCC;}
#nav > ul:not(#gnav) > li { padding: 0;}
#nav > ul:not(#gnav) > li a, #nav > ul:not(#gnav) > li span { display: block; padding: 16px 3vw; border-bottom-width: 1px;}
#btn { margin: 0 auto 32px;; text-align: center;}
#global { position: relative; right: auto; text-align: center;}
#global #gnav { display: none;}
#header > #btn { display: none;}
#nav > ul#gnav { display: block; margin: 0 0 16px; border-bottom: 1px solid #CCC; font-size: 1.4rem;}
#gnav li { margin: 16px 3vw;}
#gnav li a { border-bottom: none;}
#gnav .facebook a, #gnav .twitter a, #gnav .line a { padding: 16px 16px 16px 40px; border-radius: 6px;}
#gnav .recruit a { padding: 16px; text-align: center; border-radius: 6px;}
#open { display: block; position: fixed; top: 0; right: 0; width: 60px; height: 60px; text-align: center; background: #1362B1; font-size: 1rem; color: #FFF; cursor: pointer; z-index: 100; transition: .2s ease-in-out;}
#open div { position: relative; display: block; width: 24px; height: 24px; margin: 6px auto;}
#open span { position: absolute; left: 0; display: block; width: 24px; height: 2px; background: #FFF; border-radius: 2px; transition: .2s ease-in-out;}
#open span:nth-child(1) { top: 8px;}
#open span:nth-child(2) { top: 16px;}
#open span:nth-child(3) { top: 24px; left: 7px; width: 17px;}
.open #open span:nth-child(1) { top: 16px; -webkit-transform: rotate(45deg); -moz-transform: rotate(45deg); transform: rotate(45deg);}
.open #open span:nth-child(2) { width: 0; left: -24px;}
.open #open span:nth-child(3) { top: 16px; left: 0; width: 24px; -webkit-transform: rotate(-45deg); -moz-transform: rotate(-45deg); transform: rotate(-45deg);}
.open #nav { pointer-events: auto; display: block; top: 0; opacity: 1;}

#banner { padding: 24px 3vw; background: #E5ECF4;}
#banner h2 { font-size: 1.6rem;}
#banner h2::before, #banner h2::after { width: 30px;}
#banner ul { display: flex; flex-wrap: wrap; justify-content: center; align-items: center;}
#banner li { width: 48%;}
#banner li p { font-size: 1rem;}
#banner li a { display: block;}
#footercontents { display: block; text-align: center; padding: 24px 3vw; border-top: 1px solid #CCC;}
#footercontents ul { display: flex; justify-content: center; margin: 32px 0;}
#copyright { padding: 0 3vw 120px;}

.title h2 { font-size: 2rem;}
.list::before, .list::after { width: calc(100% / 3 - 2vw);}
.list li:not(.fill), #related .list li:not(.fill) { width: calc(100% / 3 - 2vw);}
.list li h3 { font-size: 1.6vw;}
.list .meta { font-size: 1.5vw;}
.list.alt2 li { width: calc(100% / 2 - 2vw);}
.list.alt2 li h3 { font-size: 2vw;}
.list.alt2 .linked { font-size: 1.2rem;}
.list.alt2 .name { font-size: 1.8rem;}

main { display: block;}
main#pickup, main#special, main#linked, main#wellbeing, main#coronavirus, main#tie { margin-top: 24px;}
main article { width: 100%; margin-bottom: 64px;}
#aside { width: 100%;}

.sp { display: block;}
.pc { display: none;}
}



@media only screen and (max-width: 1024px){
.row, .column { display: block;}
.row > *, .column > * { width: 100%!important;}
.column > * { margin: 0;}
.row > *:first-child, .column > *:not(:last-child) { margin-bottom: 24px;}
.toplist .catch { position: relative; top: 0; right: 0; width: 100%; border-radius: 0;}
}



@media only screen and (max-width: 768px){
a[href^="tel:"] { pointer-events: auto;}
#header { display: block; padding: 4px 3vw 16px;}
#header h1 { width: 76%; max-width: 320px; margin-bottom: 4px;}
#global { width: 100%;}
#search { width: 100%; margin: 8px auto 0;}
#search form { justify-content: center;}
#searchbox { width: 84%;}
#searchbtn { width: 16%;}

#mainimg > img { height: 40vh;}
#title { margin-bottom: 4vh;}
#title section { padding: 3vh 3vw; text-align: left;}
#title section h1, #tie h1 { padding-bottom: 8px; font-size: 2.6rem;}
#title p { padding: 0 36px; font-size: 1.6rem;}
#title p:before, #title p:after { width: 28px;}
#title #mainimg .name { padding: 8px 24px; font-size: 1.8rem;}

#chatbot { bottom: 30px; right: auto; left: 10px; width: 100px;}
#pagetop { bottom: 40px!important; right: 10px;}

main { padding: 80px 8vw;}
#catchcopy { padding: 24px; text-align: left; font-size: 1.4rem;}
#line { display: block;}
#line div { border-radius: 4px 4px 0 0; line-height: 1.4;}
#line div h2 { font-size: 2rem;}
#line figure { border-radius: 0 0 4px 4px;}
#pickup { margin-top: 24px;}
main#special, main#linked, main#wellbeing, main#tie { padding-top: 48px;}
#tag { padding: 48px 8vw;}
article > header h2 { font-size: 2rem;}
section h2 { font-size: 2.6rem;}
section h3 { font-size: 2.2rem;}
section h4 { font-size: 1.8rem;}
section h5 { font-size: 1.6rem;}
section * + h2, section * + h3, section * + h4, section * + h5 { margin-top: 6vh;}
section .alignright { float: none; margin: 0 auto;}
section .alignleft { float: none; margin: 0 auto;}
section .size-thumbnail { max-width: 100%;}
section table th, section table td { width: auto!important; padding: 8px; font-size: 1.4rem;}
.tableslide { width: 100%; margin: 24px 0; padding-bottom: 8px; overflow: auto;}
.tableslide table { white-space: nowrap;}
.tableslide::-webkit-scrollbar { height: 5px;}
.tableslide::-webkit-scrollbar-track{ background: #F6F6F6;}
.tableslide::-webkit-scrollbar-thumb { background: #C2C2C2;}
.comments-meta-list > *:not(:first-child) { padding-left: 0;}
.comments-author-name { width: 100%; padding-bottom: 8px;}
.comments-reply { padding-left: 16px!important;}
.comment-respond { padding: 16px;}
.comment-form p.comment-form-comment, .comment-form p.comments-form-email, .comment-form p.comments-form-author { display: block;}
.comment-form label { display: block; width: 100%;}
.comment-form input[type*="text"], .comment-form input[type*="email"], .comment-form textarea { width: 100%;}
.comment-form textarea { width: 100%;}

main#page header h2 { font-size: 2.4rem;}
#body .box { padding: 16px;}
#body .box h4 { position: relative; left: 0; padding: 0; transform: translate(0, 0);}

.ad a { font-size: 1.4rem;}

.title { width: calc(100% - 60px);padding: 16px 3vw;}
.title::after { right: -60px; width: 60px;}
.title h2 { font-size: 1.6rem;}
.title i { font-size: 1.2rem;}
.titlebanner { position: relative; bottom: 0; right: 0; transform: translateY(0); flex-wrap: wrap; justify-content: space-between; max-width: 100%; padding: 0; text-align: center;}
.titlebanner > div { width: 100%; padding: 4px 0;}
.titlebanner > div:not(:first-child) { width: 49%;}
.titlebanner > div a { flex: auto;}
.titlebanner > div a img { width: 100%;}
.titlebanner > div:first-child a:first-child { flex: 60%;}
.titlebanner > div:first-child a:last-child { flex: 40%;}
.toplist .list { padding-bottom: 64px;}
.balloon { top: -54px; left: 0; transform: scale(0.7);}

.list li { width: 100%!important;}
.list:not(.alt2) li a { flex-direction: row; flex-wrap: wrap; justify-content: space-between; align-items: stretch;}
.list:not(.alt2) li figure { width: 50%!important; padding-top: 40%;}
.list:not(.alt2) li a > div:not(.cat):not(.meta) { width: 50%!important;}
.list .cat { width: 58%;}
.list .cat a { padding: 4px;}
.list li h3 { font-size: 4vw!important; letter-spacing: 0;}
.list.alt2 li h3 { min-height: 96px;}
.list .meta { font-size: 2.8vw; letter-spacing: 0;}
.morebtn a { font-size: 1.4rem;}
.morebtn a::after { width: 8px; height: 8px;}

.movielink { bottom: 0; width: 100%;}
.movielink a { display: block; border-radius: 0; font-size: 2.2rem;}
.movielink a::before { margin-right: 8px; background-size: 80% auto;}

.form th, .form td { display: block; width: auto;}

.please { margin-top: 40px;}

#tie { padding: 0;}
#tie h1 img { height: 120px;}
#tie .catchcopy { margin-top: -48px;}
#tie .catchcopy p { font-size: 1.6rem;}
#tie .list:not(.related) li a { align-items: center;}
}


@media print {
#container { width: 1024px;}
}