* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    line-height: 1.7
    }

html, body {
    font-family: sans-serif;
    font-size: 100%;
    }

/*----------------------------------------------------------------------------------------------------------------------------------------------- */

.container {
    width: 960px; margin: auto
    }

@media (max-width: 960px)
 {
    .container {width: 100%; padding: 0 15px}
}

/*----------------------------------------------------------------------------------------------------------------------------------------------- */

#attention

{
    background: #FFFF00;
}

#attention h2 {
    font-size: 30px;   
}

#attention h2 span {
    font-size: 40px;   
}

h1 {
    font-size: 2em;
    margin-bottom: 80px;
}

p {
    text-align: left;
}

hr {
    width: 25%;
    border: none;
    border-top: 3px solid #555;
    margin: 30px auto 50px;
}

img {
    width: 100%;
	margin: 0;
	padding: 0;
	vertical-align: bottom;
}

/*----------------------------------------------------------------------------------------------------------------------------------------------- */

.button {overflow: hidden;
    display: block;
    background: #FACC2E;
    padding: 10px;
    border: 0;
    border-radius: 20px;
    box-shadow: 0px 10px #FE9A2E;
    font-size: 1.8rem;
    color: #fff;
    font-weight: bold;
    margin: 40px auto 10px;
    transition: all 0.2s;
    cursor: pointer;
    text-decoration: none;
    text-align: center;
    width: 400px;
}

@media (max-width: 960px)
 {
    .button {overflow: hidden;
    display: block;
    background: #FACC2E;
    padding: 10px;
    border: 0;
    border-radius: 20px;
    box-shadow: 0px 10px #FE9A2E;
    font-size: 1.8rem;
    color: white;
    font-size: 20px;
    font-weight: bold;
    margin: 20px auto 10px;
    transition: all 0.2s;
    cursor: pointer;
    text-decoration: none;
    text-align: center;
    width: 70%;
}
}

/*----------------------------------------------------------------------------------------------------------------------------------------------- */

.clearfix:after {
    content: ".";
    display: block;
    height: 0px;
    clear: both;
    visibility: hidden;
    font-size: 0.1em;
}

/*固定エントリーボタン----------------------------------------------------------------------------------------------------------------------------------------------- */

.fixed_top {
    display: table;
    position: fixed;
    z-index: 10;
    top: 0;
    right: 20px;
    background-color: #d43c92;
    padding: 0 30px;
    font-size: 20px;
}

.fixed_top a, .fixed_bottom a {
    padding: 20px;
    display: table-cell;
    vertical-align: middle;
    text-align: center;
    color: #fff;
    text-decoration: none;
}

.fixed_bottom {
    display: table;
    position: fixed;
    z-index: 10;
    bottom: 0;
    right: 20px;
    background-color: #d43c92;
}

@media (max-width: 960px)
 {
.fixed_top {
    display: table;
    position: fixed;
    z-index: 10;
    top: 0;
    right: 0px;
    background-color: #d43c92;
    font-weight: bold;
}

.fixed_top a, .fixed_bottom a {
    padding: 10px;
    display: table-cell;
    vertical-align: middle;
    text-align: center;
    color: #fff;
    text-decoration: none;
}

.fixed_bottom {
    padding: 10px;
    display: table;
    position: fixed;
    z-index: 10;
    bottom: 0;
    right: 0;
    background-color: #d43c92;
} 
}

.dots {
    background: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAIAAAACAQMAAABIeJ9nAAAABlBMVEUAAAAAAAClZ7nPAAAAAXRSTlMAQObYZgAAAAxJREFUCNdjaGBgAAABhACBKN161wAAAABJRU5ErkJggg==);
    width: 100%;
    height: 100%;
    top: 0;
    position: absolute;
}

/*cols----------------------------------------------------------------------------------------------------------------------------------------------- */

.cols {
    display: flex;
}

.cols > .col:not(:first-child) {
    margin-left: 10px;
}

.cols > .col {
    display: block;
    justify-content: space-between;
    width: 100%;
}

/*----------------------------------------------------------------------------------------------------------------------------------------------- */

section, footer {
    padding: 80px 0;
    text-align: center;
    position: relative;
}

body {background-image:url(img/top_bg_14.jpg); background-size: cover; background-position: center; background-attachment: fixed}
#top {background-color: rgba(0,0,0,0.2)}
#intro {background-color: rgba(0,0,0,0.8)}
#portland {background: #f2f2f2}
#lead {width: 100%; color: #fff; background: #FA117D}
#catch {width: 100%; color: #000000; background: #E0F2F7}
#saga {background: #fff}
#about {background: #fff}
#appeal {background-color: rgba(255,255,255,0.5);}
#flow {background: #fff}
#merit {background: #08b8e9; color: #f3e952}
#chance {background: #d5574e;	 color: #ffffff}
#recommend {background: #ededee}
#program {background: #fff}
#entry {background: #00A1E4; color: #fff}
#limit {background-color: rgba(0,0,0,0.5)}
#glowing {background: #d5574e}
#fact {background: #fff}
#faq {background: #ededee}
#contact {background: #fff}
#goal {background-image:url(img/goal.jpg); background-size: cover; background-position: center; }
#theme {color: #fff; background: #0B2161}
footer {background: black; color: #fff}

@media (max-width: 960px)
 {
  body {background: none}
  body::before {
  content:"";
  display:block;
  position:fixed;
  top:0;
  left:0;
  z-index:-1;
  width:100%;
  height:100vh;
  background:url(img/top_bg_14.jpg) center/cover no-repeat; /*fixedをトル！*/
  -webkit-background-size:cover;/*Android4*/
}
}

/*intro----------------------------------------------------------------------------------------------------------------------------------------------- */

#intro{
    color:  #fff;
}

#intro .case {
    width: 720px;
    margin: 0 auto;
}

#intro h2:first-child {margin: 0 auto 40px}

#intro h2 {
     font-family: "ヒラギノ明朝 ProN W3", "Hiragino Mincho ProN", "HG明朝E", "ＭＳ Ｐ明朝", "ＭＳ 明朝", serif;
     margin-top: 40px;
}

#intro h3 {
    text-align: left; 
   font-weight: normal;
}

@media (max-width: 960px)
 {
    
#intro .case {
    width: 100%;
}

#intro h2 {
    
}

#intro h3 {
    font-family: "ヒラギノ明朝 ProN W3", "Hiragino Mincho ProN", "HG明朝E", "ＭＳ Ｐ明朝", "ＭＳ 明朝", serif;
}
    
}


/*goal----------------------------------------------------------------------------------------------------------------------------------------------- */


#goal {
    padding: 0;
}

#goal h1 {
    color: #fff;
    padding: 250px 0 250px;
    margin: 0 auto;
    font-size: 55px;
    font-family: "ヒラギノ明朝 ProN W3", "Hiragino Mincho ProN", "HG明朝E", "ＭＳ Ｐ明朝", "ＭＳ 明朝", serif;
    text-shadow: 0 0 20px #000;
    }

#goal .black {
    background-color: rgba(0,0,0,0.7);
}

@media (max-width: 960px) 
 {

#goal {
    font-size: 20px;
    font-family: "ヒラギノ明朝 ProN W3", "Hiragino Mincho ProN", "HG明朝E", "ＭＳ Ｐ明朝", "ＭＳ 明朝", serif;
    text-shadow: 0 0 20px #000;
}
#goal h1 {
    color: #fff;
    padding: 200px 0 200px;
    margin: 0 auto;
    }
}


/*top----------------------------------------------------------------------------------------------------------------------------------------------- */

#top {
    padding-bottom: 130px;
}

#top h1 {
    color: #fff;
    font-family: "ヒラギノ明朝 ProN W3", "Hiragino Mincho ProN", "HG明朝E", "ＭＳ Ｐ明朝", "ＭＳ 明朝", serif;
    font-size: 60px;
    text-shadow: 0 0 20px #000;
    margin: 40px 0 100px;
}

#top .col:nth-child(1) {
    width: 35%;
}

#top #top_19 {
    margin: 0 0 0 50px;
}

#top #top_7days {
    position: relative;
    z-index: 1;
    transform: rotate(0deg);
    margin: 5px 0 0;
}

#top .col:nth-child(2) img {
    width: 73%;
}

#top .col:nth-child(2) div {
    width: 100%;
    height: 150px;
    position: absolute;
    top: 30px;
}

#top .col:nth-child(2) div {
    _background: #d43c92;
    transform: rotate(-5deg) skewX(-20deg);
}

@media (max-width: 960px) 
 {

#top .cols > .col:not(:first-child) {
    margin-left: 0px;
}

#top {
    padding: 20px 0 60px;
}

#top h1 {
    font-size: 26px;
    margin: 40px 0 50px;
}

#top .cols {
    display: block;
}

#top .col:nth-child(1) {
    width: 30%;
    margin: 0 auto;
}

#top #top_19 {
    margin: 0 0 20px;
}

#top #top_7days {
    width: 70%;
    position: relative;
    z-index: 1;
    transform: rotate(0deg);
    margin: 0;
}
    #top h3 img {width: 80%; margin:10px auto}
    #top h2 img {width: 95%; margin: 20px auto}
}

/*----------------------------------------------------------------------------------------------------------------------------------------------- */

#portland h1, #saga h1 {
    font-family: "ヒラギノ明朝 ProN W3", "Hiragino Mincho ProN", "HG明朝E", "ＭＳ Ｐ明朝", "ＭＳ 明朝", serif;
    margin-bottom: 50px;
}

#portland h2, #saga h2 {
    font-family: "ヒラギノ明朝 ProN W3", "Hiragino Mincho ProN", "HG明朝E", "ＭＳ Ｐ明朝", "ＭＳ 明朝", serif;
    color: #000;
    text-align: left;
    margin-bottom: 30px;
}

#portland .txt, #saga .txt {
    margin-bottom: 50px;    
}

#portland .txt p, #saga .txt p {
    margin-bottom: 30px;
}

#portland .txt ul {
    text-align: left;
    list-style-position: inside;
    margin-bottom: 30px;
}

#portland img {
    width: 100%;
}

@media (max-width: 960px) 
 {

#portland h1, #saga h1 {
    font-size: 28px;
}

#portland h2 {
    font-size: 20px;
}

#saga h2 {
    font-size: 20px;
}

#portland .cols, #saga .cols {
    display: block;
}
    
#portland .cols > .col, #saga .cols > .col {
    display: block;
    margin: 20px 0 0;
    width: 100%;
}
}

/*----------------------------------------------------------------------------------------------------------------------------------------------- */

#lead h1 {
    margin-bottom: 0
}

/*----------------------------------------------------------------------------------------------------------------------------------------------- */

#catch .box {
	border: solid 8px #000000;
	padding: 40px 20px;
	border-radius: 20px;
	margin: 0;
}

#catch h1 {
    font-family: "ヒラギノ明朝 ProN W3", "Hiragino Mincho ProN", "HG明朝E", "ＭＳ Ｐ明朝", "ＭＳ 明朝", serif;
	margin-bottom: 0;
}

#catch img {
    width: 70px;
    margin: 50px auto;
}

/*----------------------------------------------------------------------------------------------------------------------------------------------- */

#about h3 {
	text-align: left;
    margin: 20px 0;
    padding: 7px 0;
    font-size: 20px;
    font-weight: bold;
    border-bottom: 1px dotted #D8D8D8;
}

#about p.txt {
	text-align: left;
    float: left;
    width: 600px;
}

#about p.img {
    float: right;
    width: 300px;
}

#about img {
    width: 100%;
}


@media (max-width: 960px)
 {
    #about h1 {
        margin-bottom: 20px;
    }


    #about p.txt { 
    text-align: left;
    width: 100%;
}

#about p.img {
    width: 100%;
    margin-bottom: 30px;
}

#about img {
    width: 100%;
}
}

/*----------------------------------------------------------------------------------------------------------------------------------------------- */

#appeal .clearfix {
    margin-bottom: 50px;
    background-color: rgba(255,255,255,1);
    padding: 30px;
}

#appeal .left {
	text-align: left;
    float: left;
    width: 550px;
}

#appeal h1 {
    font-family: "ヒラギノ明朝 ProN W3", "Hiragino Mincho ProN", "HG明朝E", "ＭＳ Ｐ明朝", "ＭＳ 明朝", serif;
    margin-bottom: 50px; 
}

#appeal h2 {
    color: #001688;
    padding-bottom: 10px;
    font-size: 20px;
    font-weight: 700;
    text-align: left;
}

#appeal h3 {
    padding-bottom: 30px;
    font-size: 25px;
    font-weight: 700;
}

#appeal p.img {
    float: right;
    width: 300px;
}

#appeal img {
    width: 100%;
}

#appeal .img_box {
    margin-top: 20px;
    display: flex;
    justify-content: center;
}

.img_box .img:first-child {
    margin-right: 30px;
}

.yellow {
    background-color: #F2F5A9 !important;
}

.yellow h3 {
    margin: 20px 0 0;
    padding-bottom: 0 !important;
}

@media (max-width: 960px)
 {
    
#appeal .img_box {
    margin-top: 20px;
    display: block;
}
#appeal .img_box .img {
    margin-bottom: 20px;
}
    
#appeal .clearfix {
    margin-bottom: 50px;
    background-color: rgba(255,255,255,1);
    padding: 30px;
}

#appeal .left {
	text-align: left;
    float: none;
    width: 100%;
    color: #555;
    font-size: 14px;
    line-height: 1.8;
}

#appeal h1 {
    fonr-size: 20px;
}

#appeal h3 {
    font-size: 20px;
}

#appeal h2 {
    padding-bottom: 10px;
    color: #001688;
    font-size: 20px;
    font-weight: 700;
    text-align: left;
}

#appeal p.img {
    float: none;
    padding-top: 10px;
    width: 100%;
}

#appeal img {
    width: 100%;
}
}

/*----------------------------------------------------------------------------------------------------------------------------------------------- */

#theme h2 {
    font-weight: normal;
    }

#theme h1 {
    font-family: "ヒラギノ明朝 ProN W3", "Hiragino Mincho ProN", "HG明朝E", "ＭＳ Ｐ明朝", "ＭＳ 明朝", serif;
    margin: 30px auto 0;
    font-size: 23px !important;
    }

/*----------------------------------------------------------------------------------------------------------------------------------------------- */

#flow h1 {
    font-size: 40px;
    font-family: "ヒラギノ明朝 ProN W3", "Hiragino Mincho ProN", "HG明朝E", "ＭＳ Ｐ明朝", "ＭＳ 明朝", serif;
}

#flow h1.moreinfo {
    margin: 80px 0 0;
}

#flow .lead {
    -background-color: #F4F7F9;
    width: 800px;
    margin: 0 auto 100px;
    padding: 24px 40px;
    text-align: left;
}

#flow h3 {
	text-align: left;
    margin: 20px 0;
    padding: 7px 0;
    font-size: 20px;
    font-weight: bold;
    border-bottom: 1px dotted #D8D8D8;
}

#flow p.txt {
	text-align: left;
    float: left;
    width: 600px;
}

#flow p.img {
    float: right;
    width: 300px;
}

#flow img {
    width: 100%;
}

#flow h4 {
    padding-top: 100px;
    font-size: 28px;
    font-family: "ヒラギノ明朝 ProN W3", "Hiragino Mincho ProN", "HG明朝E", "ＭＳ Ｐ明朝", "ＭＳ 明朝", serif;
}


@media (max-width: 960px)
 {
    
#flow h1 {
    font-size:30px !important;
    margin-bottom: 20px;
}
    
#flow .lead {
    -background-color: #F4F7F9;
    width: 100%;
    margin: 0 auto 0px;
    padding: 0 20px;
    text-align: left;
}    
    
    #flow p.txt { 
    text-align: left;
    width: 100%;
}

#flow p.img {
    width: 100%;
    margin-bottom: 30px;
}

#flow img {
    width: 100%;
}    
}

/*----------------------------------------------------------------------------------------------------------------------------------------------- */

#merit {
	 font-size: 1.3rem;
	}

#merit .box {
    margin-bottom: 50px;
}

#merit h2 {
    text-align: left;
    margin-bottom: 10px;
}

#merit p {
    text-align: left;
}

#merit ul {
    text-align: left;
    padding-left: 20px;
}

/*----------------------------------------------------------------------------------------------------------------------------------------------- */

#chance {
	font-size: 2.5rem;
	padding: 20px;
}

#chance span {
	font-size: 3rem;
	font-weight: 700;
}

/*----------------------------------------------------------------------------------------------------------------------------------------------- */

#recommend ul {
    text-align: left;
    list-style-image: url(img/_check.png);
    width: 60%;
    margin: 0 auto 70px;
    padding-left: 20px;
}

#recommend ul li {
	margin-bottom: 20px;
}

@media (max-width: 960px)
 {
    #recommend ul {
    text-align: left;
    list-style-image: url(img/_check.png);
    width: 80%;
    margin: 0 auto;
    }
}

/*----------------------------------------------------------------------------------------------------------------------------------------------- */

#program table {
    border-collapse: collapse;
}

#program table th, #program table td {
    border: solid 1px black;
    padding: 15px;
}

#program table th {
    white-space: nowrap;
    text-align: center;
    background: rgba(0, 0, 0, 0.2);
}

#program table td {
    text-align: left;
    padding-left: 20px;
}

#program p.last {
    padding-top: 30px;
}

@media (max-width: 960px)
 {
 #program table {
    border-collapse: collapse;
}

#program table th, #program table td {
    border: solid 1px black;
    padding: 10px;
}

#program table th {
    white-space: nowrap;
    text-align: center;
    background: rgba(0, 0, 0, 0.2);
}

#program p.last {
    padding-top: 30px;
}
    
}

/*----------------------------------------------------------------------------------------------------------------------------------------------- */

#entry img {
    width: 70%;
}

#entry p {
    text-align: left;
    padding-top: 30px;
}

/*----------------------------------------------------------------------------------------------------------------------------------------------- */

#limit .box{
    background-color: rgba(255,255,255,1);
    width: 620px;
    text-align: center;
    padding: 58px;
    margin: 102px auto;
    color: #000;
}

#limit .box h3 span{
    font-size: 42px;
}

#limit .box p {
    text-align: center;
}

@media (max-width: 960px)
 {
    #limit .box{
    background-color: rgba(255,255,255,1);
    width: 80%;
    text-align: center;
    padding: 20px;
    margin: 50px auto;
    color: #000;
}
#limit .box h3 span{
    font-size: 42px;
}

#limit .box p {
    text-align: center;
}
    
}

/*----------------------------------------------------------------------------------------------------------------------------------------------- */

#fact .box {
    display: table;
    width: 100%;
    border-bottom: 1px solid #e8e8e8;
}

#fact .name {
    display: table-cell;
    width: 50%;
    padding-left: 90px;
    vertical-align: top;
    border-right: 30px solid transparent;
}

#fact .img {
    display: table-cell;
    width: 50%;
    text-align: right;
    vertical-align: top;
}

#fact .img img {
    width: 100%;
}

/*----------------------------------------------------------------------------------------------------------------------------------------------- */

#faq h2 {text-align: left}
#faq h2:nth-of-type(4n+1) {color: #CB3C79}
#faq h2:nth-of-type(4n+2) {color: #00A4C9}
#faq h2:nth-of-type(4n+3) {color: #91B850}
#faq h2:nth-of-type(4n+4) {color: #EB9D48}
#faq p {margin-bottom: 30px}

/*----------------------------------------------------------------------------------------------------------------------------------------------- */

#contact p {
    text-align: center;
    margin-bottom: 20px;
}

/*----------------------------------------------------------------------------------------------------------------------------------------------- */

footer table {
    width: 100%;
    text-align: left;
}

table th {
    text-align: center;
    padding: 15px;
}

footer a {
    color: white;
}