@charset "utf-8";
/* ---------------------------------------
max-width: 1024px
--------------------------------------- */
/************************************************************
Layout | max-width: 1200px
************************************************************/
@media screen and (max-width: 1200px) {}/* max-width: 1200px */
/* ---------------------------------------
max-width: 1024px
--------------------------------------- */
@media screen and (max-width: 1024px) {
html { font-size: 16px; }
}/* max-width: 1024px */
/* ---------------------------------------
max-width: 800px
--------------------------------------- */
@media screen and (max-width: 800px) {
html { font-size: 14px; }
}/* max-width: 800px */
/* ---------------------------------------
max-width: 600px
--------------------------------------- */
@media screen and (max-width: 600px) {
/************************************************************
Contents | General Settings
************************************************************/
.content{
position: relative;
margin: 80px 0 0 0;
}
/************************************************************
Hero
************************************************************/
.c-hero{
position: relative;
margin: 0;
background: #0080d8;
}
.c-hero__pc{
display: none;
}
.c-hero__sp{
display: block;
}
/************************************************************
About
************************************************************/
.c-about{
padding: 6.4vw;
}
.c-about__inner p{
font-size: 1.0em;
text-align: left;
line-height: 2.0;
}
/************************************************************
Contents Navigation
************************************************************/
.c-nav__column{
align-items: center;
}
.c-nav__column .__item{
position: relative;
}
.c-nav__column .__item.__ttl{
width: 100%;
text-align: center;
}
.c-nav__column .__item.__ttl .__circle{
width: 44vw;
height: 44vw;
}
.c-nav__column .__item.__ttl .__circle::before{
top: 0;
left: 0;
width: 14vw;
height: 14vw;
}
.c-nav__column .__item.__ttl h2{
font-size: 1.2em;
}
.c-nav__column .__item.__ttl h2 span{
display: block;
font-size: .7em;
margin-bottom: .5em;
}
.c-nav__column .__item.__nav{
width: 93.6%;
padding: 4.8vw;
margin-top: -4.8vw;
margin-left: 6.4vw;
}
.c-nav__column .__item.__nav ul li:last-child{
border-bottom: none;
}
.c-nav__column .__item.__nav ul li a{
padding: 1.2em 0 1.2em 32px;
font-size: 1.0em;
}
.c-nav__column .__item.__nav ul li a::before{
border-width: 6px 4px 0 4px;
left: 12px;
margin-top: -2px;
}
/************************************************************
Problem | Common Settings
************************************************************/
.c-problem{
padding: 9.6vw 0 0;
padding-bottom: calc( 30px + 2.4vw );
padding-top: calc( 60px + 9.6vw );
}
.c-problem__head{
margin-bottom: 6.4vw;
padding: 0 6.4vw;
}
.c-problem__head .__ico{
position: relative;
margin-bottom: 1.5em;
}
.c-problem__head .__ico p{
position: relative;
display: inline-block;
background: #e1007f;
color: #fff;
width: 40vw;
max-width: 240px;
font-size: .9em;
font-weight: 900;
text-align: center;
padding: 1.25em 0 1.25em .5em;
border-radius: 50px;
}
.c-problem__head .__ico p::before{
content: "";
display: block;
position: absolute;
top: -24px;
left: -36px;
width: 60px;
height: 58px;
background-image: url(../images/c_problem_ico_01.png);
background-repeat: no-repeat;
background-size: 100%;
}
.c-problem__head h2{
display: inline-block;
font-size: 1.5em;
font-weight: 900;
line-height: 1.5;
}
.c-problem__ttl{
margin: 0 4.8vw;
}
.c-problem__column{
display: flex;
flex-wrap: wrap;
align-items: center;
border-radius: 2.0vw;
overflow: hidden;
background: #0080d8;
}
.c-problem__column .__item{
width: 100%;
}
.c-problem__column .__item.__ttl{
padding: 6.4vw 0;
}
.c-problem__column .__item.__ttl .__recommend{
width: 140px;
height: 40px;
}
.c-problem__column .__item.__ttl .__logo{
margin: 3.2vw 0;
}
.c-problem__column .__item.__ttl .__logo.__session img{
width: 50vw;
}
.c-problem__column .__item.__ttl .__logo.__smartreview img{
width: 48vw;
}
.c-problem__column .__item.__ttl .__logo.__looseleaf img{
width: 70vw;
}
.c-problem__column .__item.__ttl .__about p{
font-size: .9em;
line-height: 1.8;
}
.c-problem__item{
position: relative;
background: #fff;
padding: 10.8vw 6.4vw 0;
margin: 12.8vw 4.8vw 0;
margin-bottom: calc(9.6vw + 30px);
border-radius: 2.0vw;
}
.c-problem__item::before{
width: 16.8vw;
height: 16.8vw;
top: 0;
left: 50%;
margin-top: -8.4vw;
margin-left: -8.4vw;
}
.c-problem__item .__inner .__head{
margin-bottom: 3.6vw;
}
.c-problem__item .__inner .__head h3{
font-weight: 900;
font-size: 1.2em;
line-height: 1.5;
}
.c-problem__item .__inner .__head p{
font-size: .8em;
color: #777;
margin-top: .5em;
}
.c-problem__item .__inner .__column{
flex-direction: row-reverse;
}
.c-problem__item .__inner .__column .__img{
width: 100%;
margin-left: 0;
margin-bottom: 3.6vw;
}
.c-problem__item .__inner .__column .__txt{
width: 100%;
margin-bottom: 3.6vw;
}
.c-problem__item .__inner .__img{
margin: 0;
}
.c-problem__item .__inner .__txt{
margin: 2.4vw 0;
}
.c-problem__item .__inner .__txt h4{
font-size: 1.05em;
}
.c-problem__item .__inner .__txt p{
font-size: .9em;
line-height: 1.8;
}
.c-problem__item .__inner .__target{
margin: 3.6vw 0 1.2vw;
border: 3px solid #ff6700;
border-radius: 8px;
}
.c-problem__item .__inner .__target .__item{
padding: 1.0em;
}
.c-problem__item .__inner .__target .__item.__ttl{
width: 100%;
}
.c-problem__item .__inner .__target .__item.__ttl::before{
width: 40px;
height: 40px;
left: 15px;
top: 50%;
margin-top: -20px;
}
.c-problem__item .__inner .__target .__item.__ttl h5{
font-weight: 700;
color: #fff;
font-size: 1.0em;
}
.c-problem__item .__inner .__target .__item.__body{
width: 100%;
}
.c-problem__item .__inner .__target .__item.__body p{
font-size: .85em;
}
.c-problem__item .__inner .__link{
position: relative;
margin: 3.2vw 0;
height: 30px;
}
.c-problem__item .__inner .__link a{
height: 60px;
line-height: 60px;
border-radius: 8px;
font-size: .85em;
white-space: nowrap;
letter-spacing: 0;
}
.c-problem__item .__inner .__link a:hover{
background: #005ca8;
}
/************************************************************
Related
************************************************************/
.c-related{
margin: 9.6vw 4.8vw;
}
.c-related__head{
margin: 0 0 3.6vw;
}
.c-related__head h2{
font-size: .9em;
}
.c-related__body.__column{
margin: 0;
}
.c-related__body.__column .__item{
width: 100%;
margin: 0 0 4.8vw;
}
}/* max-width: 600px */
/* ---------------------------------------
max-width: 480px
--------------------------------------- */
@media screen and (max-width: 480px) {}/* max-width: 480px */
/* ---------------------------------------
max-width: 320px
--------------------------------------- */
@media screen and (max-width: 320px) {
html { font-size: 13px; }
}/* max-width: 320px */