/* //////////////// import //////////////// */
@import url(http://fonts.googleapis.com/css?family=Lobster);

/* //////////////// header //////////////// */

.header {
    width: 100%;
    height: 400px;
    padding-top: 120px;

    /*　▼　ここに背景画像があるよ！　*/
    background-image: url(../img/title2.jpg);
    background-position: center center;
    background-size: cover;
}


h1 {
    /*　▼　ここに文字の大きさ　*/
    font-size:   40px;
    /*　▼　ここに文字の色　*/
    color:

}

h2 {
    /*　▼　ここに文字の大きさ　*/

}

h3 {
    /*　▼　ここに文字の大きさ　*/
    font-size: 20px;
}


/* //////////////// bootstrap上書き //////////////// */
.navbar{ background: #330000 !important;
}

.navbar a {
color: #ffffff !important;
}


/* //////////////// ranking //////////////// */

.ranking {
    padding: 20px 0;
    background-color: #fff4f9;
    height: auto;
    /*　▼　ここに背景画像　*/

}

.copy {
    border-radius:0px;
    background: rgba(232,186,193,0.8);
    padding: 10px 0;
    /*　▼　ここに横幅　*/
    width: 60%;
    /*　▼　ここに枠線　*/
    border-top: solid 12px #993746;
    border-bottom: solid 12px #993746;
   /*　▼　ここにマージン　*/
    margin:0 auto;
}

.first {
    font-size: 30px;
    /*　▼　ここに文字色　*/

}



/* //////////////// movie //////////////// */

.movie {
    padding: 1px 0;
    width: 100%;
    background: #eee;
}

.movie-center {
    width: 560px;
    margin: 0 auto;
}

/* //////////////// Photo //////////////// */

.photo {
    padding: 30px 0;
    background-color: #fff4f9;
}

.photo img {
    margin-bottom: 30px;
}



/* //////////////// Map //////////////// */

.map {
    height: 550px;
    background-color: #7fffd4;
}

/* //////////////// extra //////////////// */
.extra {
    height: 350px;
    background-color: #000000;
}

/* //////////////// footer //////////////// */

footer {
    background: #000;
    color: #fff;
    padding: 10px 0;
    width: 100%;
}


/* //////////////// common //////////////// */
html,
body {
    width: 100%;
    height: 100%;
}

h1{
    font-family: 'Lobster', cursive;
}

h3 {
    margin-bottom: 20px;
}

img {
    max-width: 100%;
    height: auto;
}

a img:hover {
    opacity: 0.8;
}

.outer{
  display: flex;
  justify-content: center;
  align-items: center;
}

p.マシュマロ img {
    border-radius: 0px; /* ちょっとだけ角丸 */
}




/*ここから新しいポップアップ*/
/*全体*/
.hidden_box {
    margin: 2em 0;/*前後の余白*/
    padding: 0;
}

/*ボタン装飾*/
.hidden_box label {
    padding: 15px;
    font-weight: bold;
    width: 100%;
    cursor :pointer;
}

/*ボタンホバー時*/
.hidden_box label:hover {
    background: #efefef;
}

/*チェックは見えなくする*/
.hidden_box input {
    display: none;
}

/*中身を非表示にしておく*/
.hidden_box .hidden_show {
    height: 0;
    padding: 0;
    overflow: hidden;
    opacity: 0;
    transition: 0.8s;
}

/*クリックで中身表示*/
.hidden_box input:checked ~ .hidden_show {
    padding: 10px 0;
    height: auto;
    opacity: 1;
}

.box2 {
    padding: 0.5em 1em;
    margin: 2em 0;
    font-weight: bold;
    color: #2f4f4f;/*文字色*/
    background: #FFF;
    border: solid 3px #6091d3;/*線*/
    border-radius: 10px;/*角の丸み*/
    
}
.box2 p {
    margin: 0; 
    padding: 0;
}




/*活動写真のスライドショー用*/
*, *:before, *:after {
    -webkit-box-sizing: border-box;
            box-sizing: border-box;
}
.cp_cssslider {
    width: 500px;
    padding-top: 250px; /* 画像の高さ */
    position: relative;
    margin: 1em auto;
    text-align: center;
}
.cp_cssslider > img {
    position: absolute;
    left: 0;
    top: 0;
    transition: all 0.5s;
    border-radius: 3px;
    box-shadow:0px 0px 5px 0px rgba(0,0,0,0.3);
}
.cp_cssslider input[name='cp_switch'] {
    display: none;
}
/* サムネイル */
.cp_cssslider label {
    margin: 0px 0px 1 1px;
    border: 2px solid #000000;
    display: inline-block;
    cursor: pointer;
    transition: all 0.5s ease;
    opacity: 0.6;
    border-radius: 3px;
}
.cp_cssslider label:hover {
    opacity: 0.9;
}
.cp_cssslider label img {
    display: block;
    width: 40px;
    border-radius: 2px;
}
.cp_cssslider input[name='cp_switch']:checked + label {
    border: 2px solid #FF7043;
    opacity: 1;
}
.cp_cssslider input[name='cp_switch'] ~ img {
    opacity: 0;
}
.cp_cssslider input[name='cp_switch']:checked + label + img {
    opacity: 1;
}