@charset "utf-8";
/* CSS Document */

/* ==========================================
 wrap
========================================== */
#wrap{
width: 100%;
background: #d8f2ff;
padding: 60px 0 0;
}
@media (max-width: 768px){
#wrap{
width: 100%;
padding: 5.0rem 0 0;
}
}

/* ==========================================
 main
========================================== */
[class^="main"]{
padding: 40px 0 80px;
}
.main02{
background-image: linear-gradient(0deg, transparent calc(100% - 1px), #f0f0f0 calc(100% - 1px)),linear-gradient(90deg, transparent calc(100% - 1px), #f0f0f0 calc(100% - 1px));
background-color: #fff;
background-size: 16px 16px;
background-repeat: repeat;
background-position: center center;
padding: 80px 0 0;
}
[class^="main"] .inner{
width: 1100px;
margin: 0 auto;
}
.main01 .inner .contents{
width: 780px;
float: left;
}
@media (max-width: 768px){
[class^="main"]{
padding: 3.0rem 0;
}
.main02{
padding: 3.0rem 0 0;
}
[class^="main"] .inner{
width: 100%;
padding: 0 1.5rem;
}
.main01 .inner .contents{
width: 100%;
float: none;
}
}

/* ==========================================
 header
========================================== */
#header{
width: 100%;
background: #17b3ff;
padding: 0 70px 0 20px;
position: fixed;
left: 0;
top: 0;
z-index: 10;
}
#header .inner{
width: 100%;
height: 60px;
display: flex;
justify-content: space-between;
align-items: center;
}
#header .logo{
width: 150px;
}
#header .menu{
display: flex;
align-items: center;
}
#header .menu > li{
margin: 0 20px 0 0;
}
#header .menu > li:last-child{
margin-right: 0;
}
#header .menu .reserve a,
#header .menu .search a{
color: #fff;
font-size: 1.2rem;
font-weight: bold;
padding: 23px 0 0;
display: block;
position: relative;
transition: 0.3s;
}
#header .menu .reserve a:hover,
#header .menu .search a:hover{
color: #fff070;
}
#header .menu .reserve a.icon-star-full::before{
font-size: 1.8rem;
position: absolute;
top: 0;
left: 15px;
}
#header .menu .search a.icon-search::before{
font-size: 1.8rem;
position: absolute;
top: 0;
left: 12px;
}
#header .menu .btn a{
background: #ff9600;
color: #fff;
font-size: 1.4rem;
font-weight: bold;
letter-spacing: 2px;
border-radius: 100px;
border-bottom: 4px solid #c57400;
padding: 10px 40px 8px;
display: block;
position: relative;
transition: 0.3s;
}
#header .menu .btn a::before{
content: "";
width: 8px;
height: 12px;
background: #fff;
-webkit-clip-path: polygon(100% 50%, 0 0, 0 100%);
clip-path: polygon(100% 50%, 0 0, 0 100%);
position: absolute;
right: 13px;
top: 50%;
margin-top: -5px;
}
#header .gnav{
color: #fff;
padding: 60px 25px 20px;
}
#header .gnav .list{
margin: 0 0 40px;
}
#header .gnav .list > li > a,
#header .gnav .list > li > .accBtn{
font-size: 1.6rem;
font-weight: bold;
padding: 15px 20px 15px 40px;
display: block;
position: relative;
cursor: pointer;
}
#header .gnav .list > li > .accBtn::before{
content: "";
width: 20px;
height: 3px;
background: #ffba00;
border-radius: 10px;
position: absolute;
right: 0;
top: 50%;
margin-top: -1.5px;
}
#header .gnav .list > li > .accBtn::after{
content: "";
width: 3px;
height: 20px;
background: #ffba00;
border-radius: 10px;
position: absolute;
right: 8.5px;
top: 17px;
transition: 0.3s;
}
#header .gnav .list > li > .accBtn.active::after{
transform: rotate(360deg);
opacity: 0;
}
#header .gnav .list > li > a [class^="ico"],
#header .gnav .list > li > .accBtn [class^="ico"]{
color: #ffba00;
font-size: 2.2rem;
position: absolute;
left: 0;
top: 50%;
margin-top: -1.1rem;
}
#header .gnav .list > li > ul.accBlock{
padding: 0 0 0 40px;
display: none;
}
#header .gnav .list > li > ul.accBlock > li a{
font-size: 1.4rem;
font-weight: bold;
padding: 10px 0 10px 35px;
display: block;
position: relative;
}
#header .gnav .list > li > ul.accBlock > li a::before{
content: "";
background: #ffba00;
width: 20px;
height: 5px;
border-radius: 100px;
position: absolute;
left: 0;
top: 18px;
}
#header .gnav .banner a{
display: block;
position: relative;
}
#header .gnav .banner + .banner{
margin-top: 20px;
}
@media (min-width: 769px){
#header .menu .btn a:hover{
background: #ffb300;
border-bottom: 4px solid #ff9600;
}
#header .gnav .list > li a{
transition: 0.3s;
}
#header .gnav .list > li a:hover{
color: #ffba00;
}
}
@media (max-width: 768px){
#header{
padding: 0 4.5rem 0 1.0rem;
}
#header .inner{
height: 5.0rem;
}
#header .logo{
width: 10.0rem;
}
#header .menu > li{
margin: 0 1.0rem 0 0;
}
#header .menu .reserve,
#header .menu .search{
display: none;
}
#header .menu .reserve a,
#header .menu .search a{
font-size: 1.0rem;
padding: 2.3rem 0 0;
}
#header .menu .reserve a.icon-star-full::before{
font-size: 1.8rem;
left: 1.2rem;
}
#header .menu .search a.icon-search::before{
font-size: 1.8rem;
left: 12px;
}
#header .menu .btn a{
font-size: 1.2rem;
border-bottom: 0.4rem solid #c57400;
padding: 0.8rem 2.5rem 0.5rem 2.0rem;
}
#header .menu .btn a::before{
width: 0.6rem;
height: 1.0rem;
right: 1.0rem;
margin-top: -0.5rem;
}
#header .gnav{
padding: 4.0rem 1.5rem 1.5rem;
}
#header .gnav .list{
margin: 0 0 3.0rem;
}
#header .gnav .list > li > a,
#header .gnav .list > li > .accBtn{
padding: 1.0rem 1.0rem 1.0rem 4.0rem;
}
#header .gnav .list > li > .accBtn::before{
width: 2.0rem;
height: 0.3rem;
margin-top: -0.15rem;
}
#header .gnav .list > li > .accBtn::after{
width: 0.3rem;
height: 2.0rem;
right: 0.85rem;
top: 1.2rem;
}
#header .gnav .list > li > ul.accBlock{
padding: 0 0 0 4.0rem;
}
#header .gnav .list > li > ul.accBlock > li a{
padding: 1.0rem 0 1.0rem 3.5rem;
}
#header .gnav .list > li > ul.accBlock > li a::before{
width: 2.0rem;
height: 0.6rem;
top: 1.7rem;
}
#header .gnav .banner + .banner{
margin-top: 2.0rem;
}
}

.drawer-overlay{
background: rgba(0,0,0,0.4);
z-index: 9;
}
.drawer-hamburger{
width: 30px;
height: 30px;
padding: 0;
position: absolute;
top: 50%;
margin-top: -15px;
}
.drawer--right .drawer-hamburger,.drawer-navbar .drawer-hamburger{
right: 20px!important;
}
.drawer-hamburger-icon, .drawer-hamburger-icon:after, .drawer-hamburger-icon:before{
background: #fff;
height: 5px;
border-radius: 100px;
}
.drawer-hamburger-icon{
margin-top: 0;
}
.drawer--right .drawer-nav{
right: -400px;
}
.drawer-nav{
width: 400px;
background: #002850;
}
@media (max-width: 768px){
.drawer-hamburger{
width: 2.5rem;
height: 2.5rem;
margin-top: -1.25rem;
}
.drawer--right .drawer-hamburger,.drawer-navbar .drawer-hamburger{
right: 1.0rem!important;
}
.drawer-hamburger-icon, .drawer-hamburger-icon:after, .drawer-hamburger-icon:before{
height: 0.4rem;
}
.drawer--right .drawer-nav{
right: -100%;
}
.drawer-nav{
width: 100%;
}
}

/* ==========================================
 footer
========================================== */
#footer{
width: 100%;
background: #002850;
color: #fff;
padding: 60px 0 20px;
}
#footer .text{
font-size: 1.4rem;
text-align: center;
margin: 0 0 10px;
}
#footer .text a{
text-decoration: underline;
}
#footer .copy{
font-size: 1.2rem;
text-align: center;
}
#footer .inner{
width: 1100px;
margin: 0 auto 60px;
display: flex;
flex-wrap: nowrap;
}
#footer .inner .block{
width: 245px;
}
#footer .inner .block + .block{
margin: 0 0 0 40px;
}
#footer .inner .block .logo{
width: 100%;
height: 40px;
text-align: center;
margin: 0 0 15px;
display: flex;
align-items: center;
justify-content: center;
}
#footer .inner .block .logo a{
display: inline-block;
}
#footer .inner .block .logo img{
width: 220px;
height: auto;
}
#footer .inner .block .txt{
font-size: 1.2rem;
}
@media (max-width: 768px){
#footer{
padding: 4.0rem 0 1.5rem;
}
#footer .text{
font-size: 1.2rem;
margin: 0 0 1.0rem;
}
#footer .copy{
font-size: 1.0rem;
}
#footer .inner{
width: 100%;
margin: 0 auto 4.0rem;
display: block;
}
#footer .inner .block{
width: auto;
margin: 0 1.5rem;
padding: 0 1.5rem;
}
#footer .inner .block + .block{
border-top: 1px dotted #fff;
margin: 2.0rem 1.5rem 0;
padding: 2.0rem 1.5rem 0;
}
#footer .inner .block .logo{
width: 100%;
height: auto;
margin: 0 0 1.5rem;
display: block;
}
#footer .inner .block .logo img{
width: 60%;
}
#footer .inner .block .txt{
font-size: 1.2rem;
}
}

/* ==========================================
 floatBtn
========================================== */
.floatBtn{
width: 60px;
height: 60px;
background: rgba(0,0,0,0.4);
border-radius: 10px;
position: fixed;
right: 10px;
bottom: 10px;
z-index: 5;
}
.floatBtn a{
width: 60px;
height: 60px;
display: block;
position: relative;
}
.floatBtn a::before{
content: "";
width: 30px;
height: 20px;
background: #fff;
-webkit-clip-path: polygon(50% 0%, 0% 100%, 100% 100%);
clip-path: polygon(50% 0%, 0% 100%, 100% 100%);
position: absolute;
left: 15px;
bottom: 22px;
}
@media (max-width: 768px){
.floatBtn{
width: 4.0rem;
height: 4.0rem;
border-radius: 1.0rem 0 0 0;
right: 0;
bottom: 0;
}
.floatBtn a{
width: 4.0rem;
height: 4.0rem;
}
.floatBtn a::before{
width: 2.0rem;
height: 1.8rem;
left: 1.0rem;
bottom: 1.1rem;
}
}

/* ==========================================
 sidebar
========================================== */
#sidebar{
width: 280px;
margin: 0 0 0 40px;
float: left;
}
#sidebar .block{
background: #fff;
}
#sidebar .block + .block{
margin: 20px 0 0;
}
#sidebar .block .ttl{
background: #17b3ff;
color: #fff;
font-size: 1.6rem;
font-weight: bold;
padding: 10px 10px 8px;
}
#sidebar .block .ttl span{
font-size: 2.0rem;
vertical-align: -2px;
margin: 0 8px 0 0;
display: inline-block;
}
#sidebar .block .ranking > li{
border-bottom: 1px solid #d8f2ff;
}
#sidebar .block .ranking > li a{
width: 100%;
display: table;
}
#sidebar .block .ranking > li a .num{
width: 40px;
background: #90d0db;
color: #fff;
font-size: 1.8rem;
font-weight: bold;
text-align: center;
display: table-cell;
vertical-align: middle;
}
#sidebar .block .ranking > li:nth-child(1) a .num{
background: #d8d01b;
}
#sidebar .block .ranking > li:nth-child(2) a .num{
background: #a2b8d5;
}
#sidebar .block .ranking > li:nth-child(3) a .num{
background: #da9083;
}
#sidebar .block .ranking > li a b{
font-size: 1.2rem;
font-weight: normal;
padding: 5px 10px;
display: table-cell;
vertical-align: middle;
transition: 0.3s;
}
#sidebar .block .ranking > li a b .view{
color: #808080;
font-size: 1.0rem;
display: block;
transition: 0.3s;
}
#sidebar .block .category > li{
border-bottom: 1px dotted #17b3ff;
}
#sidebar .block .category > li:last-child{
border-bottom: none;
}
#sidebar .block .category > li a{
font-size: 1.4rem;
padding: 10px 10px 10px 30px;
display: block;
position: relative;
transition: 0.3s;
}
#sidebar .block .category > li a::before{
content: "";
width: 8px;
height: 12px;
background: #17b3ff;
-webkit-clip-path: polygon(100% 50%, 0 0, 0 100%);
clip-path: polygon(100% 50%, 0 0, 0 100%);
position: absolute;
left: 15px;
top: 50%;
margin-top: -5px;
}
#sidebar .block .tag{
padding: 10px 10px 5px;
}
#sidebar .block .tag > li{
margin: 0 5px 5px 0;
display: inline-block;
}
#sidebar .block .tag > li a{
font-size: 1.4rem;
text-decoration: underline;
transition: 0.3s;
}
#sidebar .block .tag > li a span{
font-size: 1.0rem;
}
#sidebar .block .banner > li{
margin: 0 0 20px;
}
#sidebar .block .banner > li:last-child{
margin-bottom: 0;
}
#sidebar .block .banner > li a{
display: block;
}
#sidebar .block .banner > li a img{
width: 100%;
height: auto;
}
#sidebar .block .writer{
padding: 20px 20px;
}
#sidebar .block .writer .image{
width: 120px;
height: 120px;
border-radius: 100px;
margin: 0 auto 10px;
overflow: hidden;
}
#sidebar .block .writer .name{
font-size: 1.6rem;
font-weight: bold;
text-align: center;
border-bottom: 1px solid #17b3ff;
margin: 0 0 15px;
padding: 0 0 5px;
}
#sidebar .block .writer p{
font-size: 1.4rem;
}
#sidebar .block .writer p + p{
margin-top: 10px;
}
@media (min-width: 769px){
#sidebar .block .ranking > li a:hover b,
#sidebar .block .ranking > li a:hover b .view,
#sidebar .block .category > li a:hover,
#sidebar .block .tag > li a:hover{
color: #17b3ff;
text-decoration: underline;
}
}
@media (max-width: 768px){
#sidebar{
width: 100%;
margin: 3.0rem 0 0;
float: none;
}
#sidebar .block + .block{
margin: 1.5rem 0 0;
}
#sidebar .block .ttl{
padding: 1.0rem 1.0rem 0.8rem;
}
#sidebar .block .ttl span{
margin: 0 0.8rem 0 0;
}
#sidebar .block .ranking > li a .num{
width: 4.0rem;
}
#sidebar .block .ranking > li a b{
padding: 1.0rem;
}
#sidebar .block .category > li a{
padding: 1.0rem 1.0rem 1.0rem 3.0rem;
}
#sidebar .block .category > li a::before{
width: 0.8rem;
height: 1.2rem;
left: 1.5rem;
margin-top: -0.5rem;
}
#sidebar .block .tag{
padding: 1.0rem 1.0rem 0.5rem;
}
#sidebar .block .tag > li{
margin: 0 0.5rem 0.5rem 0;
}
#sidebar .block .banner > li{
margin: 0 0 1.5rem;
}
#sidebar .block .writer{
padding: 2.0rem 1.5rem;
}
#sidebar .block .writer .image{
width: 12.0rem;
height: 12.0rem;
margin: 0 auto 1.0rem;
overflow: hidden;
}
#sidebar .block .writer .name{
width: 80%;
margin: 0 auto 2.0rem;
padding: 0 0 0.5rem;
}
#sidebar .block .writer p + p{
margin-top: 1.5rem;
}
}

/* ==========================================
 breadcrumb
========================================== */
.breadcrumb{
width: 100%;
background: #fff;
padding: 5px 10px;
}
.breadcrumb .list > li{
color: #007cb8;
font-size: 1.3rem;
padding: 0 20px 0 0;
display: inline-block;
position: relative;
}
.breadcrumb .list > li.single{
font-weight: bold;
}
.breadcrumb .list > li:last-child{
padding: 0;
}
.breadcrumb .list > li::before{
content: ">";
color: #000;
position: absolute;
right: 3px;
}
.breadcrumb .list > li:last-child::before{
display: none;
}
.breadcrumb .list > li span{
margin: 0 5px 0 0;
display: inline-block;
}
.breadcrumb .list > li a{
display: inline-block;
}
.breadcrumb .list > li a:hover{
text-decoration: underline;
}
@media (max-width: 768px){
.breadcrumb{
padding: 0.5rem 1.5rem;
overflow-x: scroll;
word-break: keep-all;
white-space: nowrap;
}
.breadcrumb .list > li{
font-size: 1.2rem;
padding: 0 3.0rem 0 0;
}
.breadcrumb .list > li::before{
right: 0.8rem;
}
.breadcrumb .list > li:last-child{
padding: 0 1.5rem 0 0;
}
.breadcrumb .list > li span{
margin: 0 0.5rem 0 0;
}
}

/* ==========================================
 pager
========================================== */
.pager{
text-align: center;
margin: 30px 0 0;
}
.pager span{
min-width: 24px;
background: #17b3ff;
color: #fff;
font-size: 1.2rem;
font-weight: bold;
border: 1px solid #17b3ff;
margin: 0 3px 0 0;
padding: 3px 0;
display: inline-block;
}
.pager a{
min-width: 24px;
background: #fff;
color: #17b3ff;;
font-size: 1.2rem;
font-weight: bold;
border: 1px solid #17b3ff;
margin: 0 3px 0 0;
padding: 3px 0;
display: inline-block;
}
.pager *:last-child{
margin-right: 0;
}
@media (max-width: 768px){
.pager{
margin: 2.0rem 0 0;
}
.pager span{
min-width: 2.4rem;
margin: 0 0.3rem 0 0;
padding: 0.3rem 0;
}
.pager a{
min-width: 2.4rem;
margin: 0 0.3rem 0 0;
padding: 0.3rem 0;
}
}

/* ==========================================
 title
========================================== */
.titleTypeA01{
color: #007cb8;
font-size: 2.6rem;
font-weight: bold;
letter-spacing: 2px;
border-bottom: 6px solid #fff;
margin: 0 0 30px;
padding: 0 0 0 20px;
position: relative;
}
.titleTypeA01::before{
content: "";
width: 100px;
height: 6px;
background: #17b3ff;
position: absolute;
left: 0;
bottom: -6px;
}
.titleTypeA01:first-letter{
font-size: 4.0rem;
}
.titleTypeA01 span{
margin: 0 0 0 5px;
display: inline-block;
}
@media (max-width: 768px){
.titleTypeA01{
font-size: 1.6rem;
line-height: 1.4;
border-bottom: 0.4rem solid #fff;
margin: 0 0 2.0rem;
padding: 0 0 0 1.0rem;
}
.titleTypeA01::before{
width: 6.0rem;
height: 0.4rem;
bottom: -0.4rem;
}
.titleTypeA01:first-letter{
font-size: 3.0rem;
}
.titleTypeA01 span{
margin: 0 0 0 0.5rem;
}
}

.titleTypeB01{
color: #007cb8;
font-size: 3.0rem;
font-weight: bold;
text-align: center;
margin: 60px 0 20px;
}
.titleTypeB01 span{
font-size: 2.2rem;
display: block;
}
@media (max-width: 768px){
.titleTypeB01{
font-size: 2.2rem;
margin: 2.0rem 0;
}
.titleTypeB01 span{
font-size: 1.8rem;
}
}

/* ==========================================
 button
========================================== */
.btnTypeA01{
text-align: center;
}
.btnTypeA01 a{
width: 400px;
background: #17b3ff;
color: #fff;
font-size: 2.0rem;
font-weight: bold;
border-bottom: 6px solid #0081bf;
border-radius: 20px;
padding: 10px 30px;
display: inline-block;
position: relative;
transition: 0.3s;
}
@media (min-width: 769px){
.btnTypeA01 a:hover{
background: #ff9600;
border-bottom: 6px solid #c57400;
}
}
.btnTypeA01 a::before{
content: "";
width: 10px;
height: 16px;
background: #fff;
-webkit-clip-path: polygon(100% 50%, 0 0, 0 100%);
clip-path: polygon(100% 50%, 0 0, 0 100%);
position: absolute;
right: 20px;
top: 50%;
margin-top: -7px;
}
@media (max-width: 768px){
.btnTypeA01 a{
width: 100%;
font-size: 1.8rem;
border-bottom: 0.4rem solid #0081bf;
border-radius: 1.0rem;
padding: 1.0rem 3.0rem;
}
.btnTypeA01 a::before{
width: 0.8rem;
height: 1.4rem;
right: 1.5rem;
margin-top: -0.6rem;
}
}

/* ==========================================
 block
========================================== */
.blockTypeA01{
display: flex;
flex-wrap: wrap;
justify-content: space-between;
}
.blockTypeA01 .block{
width: 380px;
background: #fff;
border-radius: 10px;
margin: 0 0 20px;
overflow: hidden;
display: flex;
transition: 0.3s;
}
@media (min-width: 769px){
.blockTypeA01 .block:hover{
transform: scale(1.05);
}
.blockTypeA01 .block:nth-last-of-type(-n+2){
margin-bottom: 0;
}
}
.blockTypeA01 .block a{
display: block;
}
.blockTypeA01 .block a .image{
width: 100%;
height: 200px;
display: flex;
justify-content: center;
align-items: center;
overflow: hidden;
}
.blockTypeA01 .block a .image img{
width: 100%;
height: auto;
}
.blockTypeA01 .block a .textBlock{
padding: 15px 20px 10px;
}
.blockTypeA01 .block a .textBlock .category > li{
color: #ff9600;
font-size: 1.2rem;
border: 1px solid #ff9600;
margin: 0 5px 5px 0;
padding: 3px 10px;
float: left;
}
.blockTypeA01 .block a .textBlock .category > li:last-child{
margin-right: 0;
}
.blockTypeA01 .block a .textBlock .category > li.already-graduated{
color: #b00000;
border: 1px solid #b00000;
}
.blockTypeA01 .block a .textBlock .category > li.second-new-graduates{
color: #00b684;
border: 1px solid #00b684;
}
.blockTypeA01 .block a .textBlock .category > li.know-how,
.blockTypeA01 .block a .textBlock .category > li.companies-wish,
.blockTypeA01 .block a .textBlock .category > li.up_column{
color: #ff9600;
border: 1px solid #ff9600;
}
.blockTypeA01 .block a .textBlock .category > li.about-plaza,
.blockTypeA01 .block a .textBlock .category > li.job-offer,
.blockTypeA01 .block a .textBlock .category > li.event-seminar{
color: #17b3ff;
border: 1px solid #17b3ff;
}
.blockTypeA01 .block a .textBlock .category > li.user_voice,
.blockTypeA01 .block a .textBlock .category > li.faq{
color: #a832d7;
border: 1px solid #a832d7;
}
.blockTypeA01 .block a .textBlock .tag > li{
color: #17b3ff;
font-size: 1.2rem;
margin: 0 10px 0 0;
float: left;
}
.blockTypeA01 .block a .textBlock .tag > li:last-child{
margin-right: 0;
}
.blockTypeA01 .block a .textBlock .ttl{
font-size: 1.6rem;
font-weight: bold;
margin: 5px 0;
}
.blockTypeA01 .block a .textBlock .txt{
color: #808080;
font-size: 1.2rem;
margin: 0 0 5px;
}
.blockTypeA01 .block a .textBlock .date{
color: #808080;
font-size: 1.2rem;
text-align: right;
}
.blockTypeA01 .block a .textBlock .date span{
font-size: 1.2rem;
display: inline-block;
vertical-align: -1px;
margin: 0 5px 0 0;
}
.blockTypeA01 + .btnTypeA01{
margin-top: 30px;
}
@media (max-width: 768px){
.blockTypeA01{
display: block;
}
.blockTypeA01 .block{
width: 100%;
border-radius: 1.0rem;
margin: 0 0 1.5rem;
display: block;
}
.blockTypeA01 .block:nth-last-of-type(1){
margin-bottom: 0;
}
.blockTypeA01 .block a .image{
width: 100%;
height: 18.0rem;
}
.blockTypeA01 .block a .textBlock{
padding: 1.5rem 1.5rem 1.0rem;
}
.blockTypeA01 .block a .textBlock .category > li{
font-size: 1.0rem;
margin: 0 0.5rem 0.5rem 0;
padding: 0.2rem 1.0rem;
}
.blockTypeA01 .block a .textBlock .tag > li{
font-size: 1.0rem;
margin: 0 1.0rem 0 0;
}
.blockTypeA01 .block a .textBlock .ttl{
font-size: 1.6rem;
font-weight: bold;
margin: 0.5rem 0;
}
.blockTypeA01 .block a .textBlock .txt{
margin: 0 0 0.5rem;
}
.blockTypeA01 .block a .textBlock .date{
font-size: 1.0rem;
}
.blockTypeA01 .block a .textBlock .date span{
margin: 0 0.5rem 0 0;
}
.blockTypeA01 + .btnTypeA01{
vertical-align: -0.2rem;
margin-top: 2.0rem;
}
}

.blockTypeB01{
margin: 0 0 40px;
display: flex;
flex-wrap: wrap;
}
.blockTypeB01 .title{
width: 60%;
margin: 0 auto 30px;
}
.blockTypeB01 [class^="block"]{
background: #fff;
border: 1px solid #17b3ff;
border-radius: 20px;
padding: 20px 30px 15px;
}
.blockTypeB01 [class^="block"] .ttl{
margin: 0 0 15px;
}
.blockTypeB01 [class^="block"] .ttl b{
background: #17b3ff;
color: #fff;
font-size: 1.4rem;
font-weight: bold;
border-radius: 100px;
padding: 5px 20px;
display: inline-block;
}
.blockTypeB01 [class^="block"] .ttl b span{
font-size: 1.6rem;
vertical-align: -2px;
margin: 0 5px 0 0;
display: inline-block;
}
.blockTypeB01 [class^="block"] .accBtn{
pointer-events: none;
}
.blockTypeB01 [class^="block"] .accBlock{
display: block;
}
.blockTypeB01 .block01{
width: 100%;
margin: 0 0 20px;
}
.blockTypeB01 .block02{
width: 590px;
}
.blockTypeB01 .block03{
width: 488px;
margin: 0 0 0 20px;
}
.blockTypeB01 .block02 .list02{
padding: 3px 10px 0px;
}
.blockTypeB01 .block02 .list02:nth-child(odd){
background: #f4f8f9;
}
.blockTypeB01 [class^="block"] .list01 > li{
margin: 0 0 5px;
}
.blockTypeB01 [class^="block"] .list02 > li{
margin: 0 15px 5px 0;
float: left;
}
.blockTypeB01 [class^="block"] [class^="list"] > li:last-child{
margin-right: 0;
}
.blockTypeB01 [class^="block"] [class^="list"] > li a{
font-size: 1.2rem;
text-decoration: underline;
padding: 0 0 0 20px;
display: inline-block;
position: relative;
transition: 0.3s;
}
.blockTypeB01 [class^="block"] [class^="list"] > li a::before{
content: "";
width: 8px;
height: 12px;
background: #17b3ff;
-webkit-clip-path: polygon(100% 50%, 0 0, 0 100%);
clip-path: polygon(100% 50%, 0 0, 0 100%);
position: absolute;
left: 5px;
top: 50%;
margin-top: -5px;
}
.blockTypeB01 .btn{
width: 100%;
text-align: center;
margin: 20px 0 0;
}
.blockTypeB01 .btn a{
background: #17b3ff;
color: #fff;
font-size: 1.8rem;
font-weight: bold;
border-bottom: 6px solid #0081bf;
border-radius: 20px;
padding: 10px 80px;
display: inline-block;
position: relative;
transition: 0.3s;
}
.blockTypeB01 .btn a::before{
content: "";
width: 10px;
height: 16px;
background: #fff;
-webkit-clip-path: polygon(100% 50%, 0 0, 0 100%);
clip-path: polygon(100% 50%, 0 0, 0 100%);
position: absolute;
right: 20px;
top: 50%;
margin-top: -7px;
}
.blockTypeB01 .btn a span{
margin: 0 5px 0 0;
display: inline-block;
}
@media (min-width: 769px){
.blockTypeB01 [class^="block"] [class^="list"] > li a:hover{
color: #17b3ff;
}
.blockTypeB01 .btn a:hover{
background: #ff9600;
border-bottom: 6px solid #c57400;
}
}
@media (max-width: 768px){
.blockTypeB01{
border-radius: 1.0rem;
margin: 0 0 3.0rem;
padding: 0 0 1.0rem;
display: block;
}
.blockTypeB01 .title{
width: 90%;
margin: 0 auto 3.0rem;
}
.blockTypeB01 [class^="block"]{
background: none;
border: none;
border-radius: 0;
padding: 0;
}
.blockTypeB01 [class^="block"] .ttl{
margin: 0;
}
.blockTypeB01 [class^="block"] .ttl b{
border-bottom: 0.4rem solid #0081bf;
padding: 0.8rem 4.0rem 0.8rem 2.0rem;
display: block;
position: relative;
}
.blockTypeB01 [class^="block"] .ttl b::before{
content: "";
width: 1.4rem;
height: 0.2rem;
background: #fff;
position: absolute;
right: 1.5rem;
top: 50%;
margin-top: -0.1rem;
}
.blockTypeB01 [class^="block"] .ttl b::after{
content: "";
width: 0.2rem;
height: 1.4rem;
background: #fff;
position: absolute;
right: 2.1rem;
top: 50%;
margin-top: -0.7rem;
transition: 0.3s;
}
.blockTypeB01 [class^="block"] .ttl.active b::after{
transform: rotate(180deg);
opacity: 0;
}
.blockTypeB01 [class^="block"] .ttl b span{
margin: 0 0.5rem 0 0;
}
.blockTypeB01 [class^="block"] .accBtn{
pointer-events: all;
}
.blockTypeB01 [class^="block"] .accBlock{
background: #fff;
border: 1px solid #17b3ff;
border-radius: 1.0rem;
margin: 1.0rem 0 0;
display: none;
overflow: hidden;
}
.blockTypeB01 .block01{
width: 100%;
margin: 0 0 1.5rem;
}
.blockTypeB01 .block02{
width: 100%;
margin: 0 0 1.5rem;
}
.blockTypeB01 .block03{
width: 100%;
margin: 0;
}
.blockTypeB01 .block01 .list02,
.blockTypeB01 .block03 .list02{
padding: 1.0rem 1.5rem 0.5rem;
}
.blockTypeB01 .block02 .list02{
padding: 0.3rem 1.5rem 0;
}
.blockTypeB01 [class^="block"] .list01 > li{
margin: 0 0 0.5rem;
}
.blockTypeB01 [class^="block"] .list02 > li{
margin: 0 1.5rem 0.5rem 0;
}
.blockTypeB01 [class^="block"] [class^="list"] > li a{
padding: 0 0 0 2.0rem;
}
.blockTypeB01 [class^="block"] [class^="list"] > li a::before{
width: 0.8rem;
height: 1.2rem;
left: 0.5rem;
margin-top: -0.5rem;
}
.blockTypeB01 .btn{
margin: 2.0rem 0 0;
}
.blockTypeB01 .btn a{
font-size: 1.8rem;
border-bottom: 0.4rem solid #0081bf;
border-radius: 1.0rem;
padding: 1.0rem 3.0rem;
display: block;
}
.blockTypeB01 .btn a::before{
width: 0.8rem;
height: 1.4rem;
right: 1.5rem;
margin-top: -0.6rem;
}
.blockTypeB01 .btn a span{
margin: 0 0.5rem 0 0;
}
}

.blockTypeB02{
background: #d8f2ff;
text-align: center;
padding: 60px 0;
}
.blockTypeB02 .block{
display: inline-block;
position: relative;
}
.blockTypeB02 .block::before{
content: "";
width: 96px;
height: 261px;
background: url("/support_blog/wp-content/themes/shukatucolumn_v2/assets/images/common/common_img_01.png") no-repeat;
background-size: 100% auto;
background-position: top center;
position: absolute;
left: -132px;
top: -12px;
}
.blockTypeB02 .block .text{
color: #002850;
font-size: 1.6rem;
margin: 0 0 20px;
}
.blockTypeB02 .block .btn{
margin: 0 0 20px;
}
.blockTypeB02 .block .btn a{
background: #ff9600;
color: #fff;
font-size: 2.4rem;
font-weight: bold;
letter-spacing: 4px;
border-bottom: 6px solid #c57400;
border-radius: 20px;
padding: 10px 100px;
display: inline-block;
position: relative;
transition: 0.3s;
}
.blockTypeB02 .block .btn a::before{
content: "";
width: 10px;
height: 16px;
background: #fff;
-webkit-clip-path: polygon(100% 50%, 0 0, 0 100%);
clip-path: polygon(100% 50%, 0 0, 0 100%);
position: absolute;
right: 20px;
top: 50%;
margin-top: -7px;
}
.blockTypeB02 .block .tel{
text-align: center;
}
.blockTypeB02 .block .tel a{
font-size: 1.4rem;
text-align: right;
line-height: 1.4;
display: inline-block;
pointer-events: none;
}
.blockTypeB02 .block .tel a b{
color: #002850;
font-size: 5.0rem;
font-weight: bold;
letter-spacing: 5px;
}
.blockTypeB02 .block .tel a span{
color: #01a63d;
font-size: 6.4rem;
vertical-align: -9px;
margin: 0 10px 0 0;
display: inline-block;
}
@media (min-width: 769px){
.blockTypeB02 .block .btn a:hover{
background: #ffb300;
border-bottom: 6px solid #ff9600;
}
}
@media (max-width: 768px){
.blockTypeB02{
padding: 3.0rem 0 2.0rem;
}
.blockTypeB02 .block{
padding: 0 1.5rem;
display: block;
}
.blockTypeB02 .block::before{
display: none;
}
.blockTypeB02 .block .text{
font-size: 1.4rem;
text-align: left;
margin: 0 0 1.5rem;
padding: 0 0 0 7.0rem;
position: relative;
}
.blockTypeB02 .block .text::before{
content: "";
width: 4.3rem;
height: 11.7rem;
background: url("/support_blog/wp-content/themes/shukatucolumn_v2/assets/images/common/common_img_01.png") no-repeat;
background-size: 100% auto;
background-position: top center;
position: absolute;
left: 0.5rem;
top: -0.5rem;
}
.blockTypeB02 .block .btn{
margin: 0 0 2.0rem;
}
.blockTypeB02 .block .btn a{
font-size: 2.0rem;
border-bottom: 0.4rem solid #c57400;
border-radius: 1.0rem;
padding: 1.0rem 3.0rem;
display: block;
}
.blockTypeB02 .block .btn a::before{
width: 0.8rem;
height: 1.4rem;
right: 1.5rem;
margin-top: -0.6rem;
}
.blockTypeB02 .block .tel a{
font-size: 1.2rem;
pointer-events: all;
}
.blockTypeB02 .block .tel a b{
font-size: 3.4rem;
letter-spacing: 0;
}
.blockTypeB02 .block .tel a span{
font-size: 4.0rem;
vertical-align: -0.4rem;
margin: 0 1.0rem 0 0;
}
}

/* ==========================================
 404
========================================== */
.notfound{
margin: 0 0 100px;
}
.notfound .text{
font-size: 1.6rem;
text-align: center;
margin: 0 0 30px;
}
@media (max-width: 768px){
.notfound{
margin: 0 0 8.0rem;
}
.notfound .text{
font-size: 1.4rem;
margin: 0 0 2.0rem;
}
}