@charset "utf-8";

/*-------------------------------------------*/
/*  CONTENTS:
/*--------------------------------------------
1.0 - reset
2.0 - 汎用スタイル
    2.1 - テキストリンク
    2.2 - 見出し
    2.3 - ボタン
    2.4 - 文字装飾
    2.5 - 改行
    2.6 - 矢印
    2.7 - カラム
    2.8 - PC・SP表示
3.0 - フッター
4.0 - メインビジュアル

/*-------------------------------------------*/
/*  1.0 - reset
/*-------------------------------------------*/
abbr,address,article,aside,audio,b,blockquote,body,canvas,caption,cite,code,dd,del,details,dfn,div,dl,dt,em,fieldset,figcaption,figure,footer,form,h1,h2,h3,h4,h5,h6,header,hgroup,html,i,iframe,img,ins,kbd,label,legend,li,mark,menu,nav,object,ol,p,pre,q,samp,section,small,span,strong,sub,summary,sup,table,tbody,td,tfoot,th,thead,time,tr,ul,var,video{margin:0;padding:0;border:0;outline:0;font-size:100%;vertical-align:baseline;background:transparent}body{line-height:1}article,aside,details,figcaption,figure,footer,header,hgroup,menu,nav,section{display:block}nav ul{list-style:none}blockquote,q{quotes:none}blockquote:after,blockquote:before,q:after,q:before{content:'';content:none}a{margin:0;padding:0;font-size:100%;vertical-align:baseline;background:transparent}table{border-collapse:collapse;border-spacing:0}hr{border:0}

/*-------------------------------------------*/
/*  2.0 - 汎用スタイル
/*-------------------------------------------*/
html { font-size: 62.5%;}
body, textarea {
  background: #fff;
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
  font-family: 'genjyu',"ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", "メイリオ", Meiryo, Osaka, sans-serif;
  font-size: 1.4rem;
  line-height: 1.6;
  color: #333;
}
li { list-style: none;}
div, ul, li, a { box-sizing: border-box;}
input { -webkit-appearance: none; -moz-appearance: none;}
.block {
    text-align: center;
    margin: 0 0 40px;
}
@font-face {
    font-family: 'genjyu';
    src: url('font/GenJyuuGothic-Bold.ttf') format('truetype');
    font-weight: bold;
    font-style: bold;
}
@font-face {
    font-family: 'genjyu';
    src: url('font/GenJyuuGothic-Medium.ttf') format('truetype');
    font-weight: normal;
    font-style: normal;
}
@media screen and (min-width: 768px) {
    .block {
        margin: 0 0 60px;
    }
}
/*  2.1 - テキストリンク
/*-------------------------------------------*/

a { color: #2DA7FF;}
a:hover { color: #fcad47;}
a:visit {color: #2DA7FF;}

/*  2.2 - 見出し
/*-------------------------------------------*/
h2 {
    font-size: 2.2rem;
    box-sizing: border-box;
    padding: 0;
    margin-bottom: 10px;
    text-align: center;
}
@media screen and (min-width: 768px) {
  h2 {
    line-height: 1.5em;
    font-size: 2.8rem;
  }
}

/*  2.3 - ボタン
/*-------------------------------------------*/

/*  2.6 - 矢印
/*-------------------------------------------*/


/*  2.7 - カラム
/*-------------------------------------------*/
.inner {
    width: 100%;
    max-width: 950px;
    box-sizing: border-box;
    margin: 0 auto;
}

/*  2.8 - PC・SP表示
/*-------------------------------------------*/
.pc { display: none;}
.sp { display: block;}

@media screen and (min-width: 768px) {
    .pc { display: block;}
    .sp { display: none;}
}

/*-------------------------------------------*/
/*  3.0 - フッター
/*-------------------------------------------*/
footer .copyright {
    padding: 25px 0;
    text-align: center;
    font-size: 1.1rem;
    background: #5dc6ea;
    color: #fff;
}

/*-------------------------------------------*/
/*  4.0 - メインビジュアル
/*-------------------------------------------*/
.head {
    padding: 5px 5px 0;
}
.head .logo a {
  display: inline-block
}
.head .logo img {
    width: 40px;
}
.mainvisual h1 img {
  width: 100%;
}
.logo.sp span {
    padding-bottom: 5px;
    display: block;
    text-align: center;
}
@media screen and (min-width: 768px) {
    .head {
        padding-top: 10px;
    }
    .head .logo img {
        width: 170px;
    }
    .logo.pc {
        display: flex;
        width: 1000px;
        height: 50px;
        margin: 0 auto;
    }
    .logo.pc span {
        padding-top: 10px;
        padding-left: 10px;
        display: inline-block;
        font-weight: normal;
        font-size: 13px;
    }
    .mainvisual {
        height: 250px;
        margin-bottom: 60px;
        background: linear-gradient(180deg, rgba(86,196,234,1) 0%, rgba(171,220,237,1) 100%);
    }
    .mainvisual h1 {
        position: absolute;
        top: 96px;
    }
}

/*-------------------------------------------*/
/*  5.0 - チャンスイットとは
/*-------------------------------------------*/
.about {
    padding: 0 20px;
    text-align: left;
}
.about h2 {
    font-size: 2.8rem;
    font-weight: bold;
}
.about span {
    color: #ff2764;
    font-weight: bold;
}
.about > div div {
    margin-bottom: 20px;
    font-weight: normal;
    font-size: 1.6rem;
}
.about > div p img {
    width: 100%;
    height: auto;
}
.contents {
    padding: 50px 0;
    background: #edf5f7;
}
.contents h2.sp {
    padding: 0 20px;
}
.contents h2.sp img {
    width: 100%;
}
.contents ul {
    display: flex;
    padding: 0 20px;
    flex-wrap: wrap;
    gap: 20px;
}
.contents ul li {
    width: calc(50% - 10px);
}
.contents ul li a {
    display: block;
    padding: 10px 0;
    width: 100%;
    border-radius: 10px;
    background: #fff;
    box-shadow: 3px 3px 4px 1px rgba(136, 136, 136, 0.4);
    text-decoration: none;
    color: #333;
    font-size: 2.4rem;
    font-weight: bold;
}
.contents ul li a:hover {
    opacity: 0.7;
}
@media screen and (min-width: 768px) {
    .about {
        padding: 0;
    }
    .about h2 {
        font-size: 40px;
        margin-bottom: 20px;
    }
    .about > div {
        width: 750px;
        margin: 0 auto;
        display: flex;
        font-size: 16px;
    }
    .about > div div,
    .about > div p {
        margin: 0;
        width: 50%;
    }
    .about > div p {
        text-align: right;
    }
    .about > div p img {
        width: 360px;
        height: auto;
    }
    .contents h2::before {
      content: url("img/ico_headline_l.png");
      vertical-align: middle;
      padding-right: 20px;
    }
    .contents h2::after {
      content: url("img/ico_headline_r.png");
      vertical-align: middle;
      padding-left: 20px;
    }
    .contents ul {
        width: 700px;
        margin: 0 auto;
        display: flex;
        flex-wrap: wrap;
        gap: 20px;
    }
    .contents ul li {
        width: calc(33% - 20px);
    }
    .contents ul li a {
        font-size: 24px;
        font-weight: bold;
    }
}
/*-------------------------------------------*/
/*  6.0 - Aさんのある1日
/*-------------------------------------------*/
.oneday {
    font-weight: bold;
}
.oneday h3 {
    margin-bottom: 20px;
}
.oneday h3 img {
    width: 100%;
}
.oneday a {
    display: inline-block;
}
.oneday .time span {
    display: inline-block;
    margin-right: 8px;
    font-family: "chippewa-falls", sans-serif;
    font-weight: 500;
    font-style: normal;
}
.oneday li {
    padding: 0 20px;
    margin-bottom: 20px;
}
.oneday li > div {
    display: flex;
    text-align: left;
}
.oneday li > div > p {
    width: 30%;
    margin-right: 10px;
}
.oneday li > div > p img {
    width: 100%;
}
.oneday li > div div {
    width: 70%;
    font-size: 1.4rem;
    margin-top: -20px;
}
.oneday li > div div p {
    margin-bottom: 5px;
}
.oneday li.no_point {
    background: #edf5f7;
    text-align: left;
    padding: 10px;
}
.oneday li.no_point .time span {
    display: inline-block;
    margin-right: 10px;
}
.oneday li dl {
    border: 2px solid #ff2764;
    border-radius: 10px;
    text-align: center;
}
.oneday li dl dt {
    background: #ff2764;
    color: #fff;
    border-top-left-radius: 8px;
    border-top-right-radius: 8px;
}
.oneday li dt,
.oneday li dd {
    padding: 5px 0;
}
.oneday .time {
    font-size: 1.6rem;
    margin-bottom: 0;
}
.oneday .time span {
    font-size: 2.4rem;
}

@media screen and (min-width: 768px) {
    .oneday h3 img {
        width: 750px;
    }
    .oneday ul {
        width: 750px;
        margin: 0 auto;
    }
    .oneday li {
        padding: 0 20px;
        margin-bottom: 30px;
    }
    .oneday li > div {
        width: 600px;
        margin: 0 auto;
    }
    .oneday li > div > p {
        margin-right: 20px;
    }
    .oneday li > div div {
        font-size: 18px;
        margin-top: -20px;
    }
    .oneday li > div div p {
        margin-bottom: 10px;
    }
    .oneday li.no_point {
        padding: 0 0 10px 40px;
    }
    .oneday li.no_point .time span {
        margin-right: 20px;
    }
    .oneday .time {
        font-size: 24px;
        margin-bottom: 0;
    }
    .oneday .time span {
        font-size: 40px;
    }
    
}
/*-------------------------------------------*/
/*  7.0 - ユーザーの声
/*-------------------------------------------*/
.voice {
    padding: 50px 0;
    background: #edf5f7;
}
.voice h2 {
    padding: 0 20px;
}
.voice h2 img {
    width: 100%;
}
.voice ul {
    padding: 0 20px;
}
.voice ul li {
    position: relative;
    border-radius: 10px;
    box-shadow: 3px 3px 4px 1px rgba(136, 136, 136, 0.4);
    background: #fff;
    text-align: left;
    font-size: 1.4rem;
}
.voice .user {
    position: absolute;
    left: 3px;
    bottom: 0;
}
.voice .user img {
    width: 100px;
    display: flex;
}
.voice .voice_title {
    padding: 6px 0;
    color: #fff;
    font-weight: bold;
    border-top-left-radius: 10px;
    border-top-right-radius: 10px;
}
.voice .voice_title {
    padding: 10px;
    text-align: center;
}
.voice div {
    padding: 10px 10px 10px 110px;
}
.voice ul li {
    margin-bottom: 20px;
}
.voice li:nth-child(1) .voice_title,
.voice li:nth-child(3) .voice_title {
    background: #ff2764;
}
.voice li:nth-child(2) .voice_title {
    background: #1987c3;
}
@media screen and (min-width: 768px) {
    .voice h2::before {
        content: url("img/ico_headline_l.png");
        vertical-align: middle;
        padding-right: 20px;
    }
    .voice h2::after {
        content: url("img/ico_headline_r.png");
        vertical-align: middle;
        padding-left: 20px;
    }
    .voice ul {
        padding: 0;
    }
    .voice ul li {
        width: 650px;
        margin: 0 auto 20px;
        min-height: 170px;
        font-size: 18px;
    }
    .voice .user img {
        width: 100%;
        display: flex;
    }
    .voice .voice_title {
        padding-left: 150px;
    }
    .voice div {
        padding: 20px 20px 10px 150px;
    }
}
/*-------------------------------------------*/
/*  8.0 - サイトリンク
/*-------------------------------------------*/
.link h2 {
    padding: 0 20px;
}
.link h2 img {
    width: 100%;
}
.link ul {
    width: 100%;
    padding: 0 20px;
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
}
.link ul li {
    width: calc(50% - 5px);
    border-radius: 5px;
    text-align: center;
    font-size: 2.6rem;
}
.link ul li:nth-child(1) { 
    background: #f54757;
    box-shadow: 0 5px 0 #be0d3f;
}
.link ul li:nth-child(2),
.link ul li:nth-child(3) {
    background: #ff9e36;
    box-shadow: 0 5px 0 #d87a15;
}
.link ul li:nth-child(4),
.link ul li:nth-child(5) {
    background: #23acb0;
    box-shadow: 0 5px 0 #106e71;
}
.link ul li:nth-child(6) {
    background: #1987c3;
    box-shadow: 0 5px 0 #093f5c;
}
.link ul li a {
    padding: 10px 0;
    display: block;
    color: #fff;
    text-decoration: none;
    font-size: 2.4rem;
}
@media screen and (min-width: 768px) {
    .link h2::before {
        content: url("img/ico_headline_l.png");
        vertical-align: middle;
        padding-right: 20px;
    }
    .link h2::after {
        content: url("img/ico_headline_r.png");
        vertical-align: middle;
        padding-left: 20px;
    }
    .link ul {
        width: 750px;
        margin: 0 auto;
        padding: 0;
        justify-content: space-between;
        gap: 0px;
    }
    .link ul li {
        width: 180px;
    }
    .link ul li a {
        padding: 15px 0;
    }
    .link ul li:active {
        box-shadow: none;
        transform: translateY(5px);
    }
}