@charset "utf-8";

@import url(reset.css); 

/* common
------------------------------------------------------------*/

body {
	font-family: Helvetica, ArialMT,"Noto Sans Japanese","Hiragino Kaku Gothic ProN","?q???M?m?p?S ProN W3",???C???I,sans-serif;
	color: #000;
	text-align: center;
}

nav {
	position: fixed;
	top: 0;
	width: 100%;
	background: #c1e7f2;
	color: #00693e;
	font-weight: 600;
	z-index: 9999;
}

header .w940 p.supported{
	text-align: center;
	font-weight: 700;
}

header .w940 p.blackline{
	background: #000;
	height: 2px;
	margin: 0 auto;
}

header .w940 .toptext{
	font-weight:600;
	line-height: 1.6;
}

.contents .w860{
	border-radius:5px;
	overflow: hidden;
}

.contents .w860 article{
	font-weight:600;
	line-height: 1.6;
}

.contents .w860 article p.btn a{
	display:block;
	color:#fff;
	text-decoration: none;
	line-height: 1.0;
}



.topic01{
	background:#fdd704;
}

.topic01 p.btn a{
	background:#e5006e;
}

.topic02{
	background:#fcc602;
}

.topic02 p.btn a{
	background:#00693e;
}

.topic03{
	background:#fdd704;
}

.topic03 p.btn a{
	background:#0099ff;
}

.whats{
	background:#ebebeb;
}

.whats .w940{
	font-weight:600;
	line-height: 1.6;
}

.whats .w940 p.mi{
	color:#11512b;
}

.whats .w940 article{
	border:1px solid #11512b;
}


.copyright {
	color: #fff;
	font-size: 10px;
}


a:hover{ 
	opacity: 0.8;
}
/* clearfix */
.clearfix:after {
	content:".";
	display:block;
	height:0;
	visibility:hidden;
	clear:both;
}
.clearfix {
	display:inline-block;
	min-height:1%;  /* for IE 7 and MacIE5.5*/
	width: 100%;
}


/*message*/

.message{
    /* background-color: #fff; */
}

.listen ul {
display: table;
}

.listen ul li {display: table-cell;/* width: 50%; *//* text-align: center; */}

.message_photo img {
    width: 100%;
    margin-left: 1px;
    }

.message dt, .message dd {
    text-align: left;
    /* font-weight: 500; */
    }

.message dt img {
        width: 198px;
}
    
.message dd {
    font-size: 19px;
    line-height: 1.5;
    color: #535348;
    letter-spacing: 1.1px;
    }

/* =========================================================
	PC
========================================================= */

@media screen and (min-width: 768px) {
	
	html,
	body {
		min-width: 940px;
	}

	body {
		background: #fdfdfd;
		font-size: 16px;
		line-height: 1.6;
	}
	

	
	
/*190313*/
	


#content{
		padding: 70px 0;
		background-image: url(../img/bg_pc.jpg);
		background-position: top;
		background-repeat: repeat;
		/* background-size: 100px 50px, 20%; */
}

.w960{
		width: 940px;
		margin:0 auto;
}
	
.omoide {
	/* margin: 0 auto; */
	padding: 5px;
	
}

.omoide ul.header{
margin-left:-17px;
display:table;
 border-collapse: separate;  /* セルの間隔を空ける */
 border-spacing: 20px 0;  /* 左右 上下で記述 */
}

.omoide ul.header li{
display:table-cell;
}


.omoide ul.topic{
	column-count: 3;
	gap: 10px;
}

.omoide ul.topic li{

  padding: 5px;
  -webkit-column-break-inside: avoid;
  page-break-inside: avoid;
  break-inside: avoid;
}
	
.omoide p{
  font-size:14px;
  text-align:left;
  color: #2f2f25;
}
	
.omoide .pink{

  color:#fc4351;
}
	
.photo {

  padding: 5px;
  -webkit-column-break-inside: avoid;
  page-break-inside: avoid;
  break-inside: avoid;
}

.photo img{
	border-radius: 15px;
}

.omoide #btnClick{
	 text-align:center; 
}

.omoide #btnClick img:hover {
	opacity: 0.8;
}
	
    .message .w940{
    background: url(../img/border_pc.png) top center repeat-x,url(../img/border_pc.png) bottom center repeat-x;
    background-size: 4px;
    padding: 50px 0 70px;
    width: 940px;
    margin-top: -35px;
    }
    
    .photo {
        padding: 0 0 35px;
    }
    
    .message dl {
    display: table;
    width: 100%;
    }
    
    .message dt {
        width: 232px;}
    
    
    .message dt, .message dd {
    display: table-cell;
    vertical-align: top;
    font-weight: bold;
    }
    
    .listen {
    padding: 100px 0 0;
    }
    
    .listen p {
    padding: 0 0 27px;
    color: #535348;
    font-weight: bold;
    }
    
    .listen p img {
    width: 244px;
    }
    
    .listen ul {
    /* width: 540px; */
    border-collapse: separate;
    border-spacing: 50px 0;
    margin: 0 auto;
    }
    
    .listen ul li img {
    width: 135px;
    }	
	
	
	



	.hide_pc {
		display: none;
	}

	a:hover {
		opacity: 0.8;
	}

	.w940,nav article {
		width: 940px;
		margin: 0 auto;
		box-sizing:border-box;
	}


	nav article {
		text-align: left;
		padding: 5px 0px;
		position: relative;
		color: #fff;
	}

	nav img {
		vertical-align: middle;
		margin: 0px 0px 0 10px;
	}

.daysbtn{
	/* width: 186px; */
	margin-top: 1px;
}

	nav img.sollogo {
		width: 78px;
		margin-left: -1px;
		margin-right: 5px;
	}

	nav article .social {
		position: absolute;
		top: 5px;
		right: -4px;
	}

nav article .social p{display: inline;position:relative;margin-right: 5px;}

nav article .social p img{
 width: 179px;
}


	header .w940 {
		padding: 80px 0 10px;
	}

	header .w940 p.supported {
		font-size: 14px;
		padding: 10px 0 35px;
	}

	header .w940 p.supported a img {
		width: 111px;
		vertical-align: middle;
		margin-left: 15px;
	}

	header .w940 p.blackline {
		width: 722px;
	}
	
	header .w940 .toptext{
		padding:30px 0;
	}
	
	header .w940 .topsticker{
		padding:0 0 30px;
	}
	
	header .w940 .topsticker a img{
		width: 722px;
	}

	.contents .w860{
		width:860px;
		margin:0 auto;
	}
	
	.contents .w860 article{
		padding: 50px 30px;
	}

	.contents .w860 article p.mi{
		font-size: 34px;
		/* margin-bottom:25px; */
	}
	


	.contents .w860 article p.mi{
	color:#11512b;
}

	.contents .w860 article p.mi2{
		font-size: 26px;
		/* margin-bottom:25px; */
	}
	




    .photo01{     
        display: flex;
        flex-flow: row wrap;
        justify-content: space-between;
        margin-bottom: 10px;
    }
    






	footer .w940 {
		padding: 60px 0;
	}

	footer .w940 p {
		text-align: center;
	}

	footer .w940 p img {
		width: 134px;
	}

	.copyright {
		font-size: 10px;
		margin-top: 20px 0;
		padding-bottom: 24px;
		/* margin: 20px 0; */
	}

	#pagetop {
		display: inline;
		position: fixed;
		bottom: 0;
		right: 20px;
		/* opacity: 0.7; */
		width: 50px;
		text-align: right;
		line-height: 0;
	}

	#pagetop img {
		width: 50px;
	}

	#pagetop img:hover {
		opacity: 0.6;
		cursor: pointer;
	}

.sp {
	display:none;
}

/* 
 .owl-controls {
	display: none;
}
*/
#page{
	overflow:hidden;
	margin:0 auto;
	width:100%;
}
/* header
------------------------------------------------------------*/


/*  main 
------------------------------------------------------------*/


.item .desc a img{padding-top: 12px;}




	


#fot{
	background: url(../img/f_bg_pc.jpg) repeat;
	/* background-size:contain; */
	background-position:top;
}





.sakura img{
	margin-top: -54px;
}

footer{
	padding: 50px 0 0;
}

footer ul{
	display:table;
	margin: 10px auto;
	border-collapse: separate;  /* セルの間隔を空ける */
	border-spacing: 30px 0;  /* 左右 上下で記述 */
}

footer ul li{
	display:table-cell;
}
.sol{
	padding: 60px 0 10px;
}


}



/* =========================================================
	SP
========================================================= */

@media screen and (max-width: 767px) {

.pc {
	display:none;
}


	body {
		background: #fdfdfd;
		background-size: 50%;
		font-size: 14px;
	}
	
	img {
		max-width: 100%;
	}

	h1 img {
		width: 100%;
	}

#content{
	padding: 50px 0;
	background: url(../img/bg_sp.jpg) repeat;
	background-size: 100%;
	background-position: top;
	/* background-attachment: fixed; */
	/* margin: 0 auto; */
}

#pagetop{
	display:inline;
	position:fixed;
	bottom:0;
	right:10px;
	opacity:0.7;
	width:20%;
	text-align: right;
	line-height: 0;
    z-index: 10;
}

.w960{
		width: 940px;
		margin:0 auto;
}
	
.omoide {
	/* margin: 0 auto; */
	/* padding: 5px; */
	/* width: 940px; */
	width: 95%;
	/* gap: 20px; */
	/* margin: 10px 0; */
}

.omoide ul.topic{
	column-count: 2;
}

.omoide ul li{
  padding: 5px 0;
  -webkit-column-break-inside: avoid;
  page-break-inside: avoid;
  break-inside: avoid;
}

.omoide ul li iframe{
		width:100%;
		/* height:200px; */
		position:relative;
		z-index:999;
		padding:30px  0;
	}
	
.omoide p{
  font-size: 12px;
  text-align:left;
  color: #2f2f25;
  line-height: 1.5;
}


	
.omoide .pink{

  color:#fc4351;
}

.omoide #btnClick{
	 text-align:center; 
}

.omoide #btnClick img{
	width: 20%;
}

.photo{padding: 0 0 10px;}

.photo img{
	border-radius: 15px;
}
	

	.hide_sp {
		display: none;
	}

	nav article {
		padding: 5px;
		text-align: left;
	}

	nav img {
		vertical-align: middle;
		margin: 0 8px;
		width: initial;
	}
.sollogo{
	width: 19%;
}

.textsp{
	width: 56%;
	margin-right: 12px;
	padding-top: 5px;
}

	nav article .social {
		position: absolute;
		/* top: 5px; */
		right: -148px;
	}

 .text_sp{
	width: 55%;
	text-align:right:;
	margin-top:5px;
}




.message{
    width:95%;
    margin: -1px auto;
}
.message .sakura img{
   margin-top: -26px;
   width: 88%;
}


    .message .w960 {
        background: url(../img/main/border_sp.png) top center no-repeat,url(../img/main/border_sp.png) bottom center no-repeat;
        background-size: 100%;
        padding: 25px 0;
    }
    
    .message dt {
        width: 100%;
        text-align: center;
        padding: 37px 0 15px;
    }
    
    .message dt img {
        width: 27%;
    }
    
    .message dd {
        width: 100%;
        font-size: 12px;
        line-height: 1.7;
        color:#ffffff;
        font-weight: bold;
    }

    
footer{
	padding:20px 0;
}

footer ul{
	display:table;
	margin: 10px auto;
	border-collapse: separate;  /* セルの間隔を空ける */
	border-spacing: 22px 0;  /* 左右 上下で記述 */
	width: 50%;
}

footer ul li{
	display:table-cell;
}

.sol{
	margin-top: 31px;
}

.sol img{
	width: 24%;
}
    

    .listen {
        padding: 21px 0 0;
    }
    
    .listen p {
        padding: 0 0 12px;
        font-size: 10px;
        color: #11512b;
        font-weight: bold;
    }
    
    .listen ul {
        width: 85%;
        margin: 0 auto;
        border-collapse: separate;  /* セルの間隔を空ける */
        border-spacing: 42px 0;  /* 左右 上下で記述 */
    }
    
    .listen ul li img {
        /* width: 63%; */
    }
    
    .listen p img {
        width: 35%;
    }

#fot{
	background: url(../img/f_bg_sp.jpg) repeat;
	background-size: cover;
	/* background-position: 50% 0%; */
}

    .message .w940{
    background: url(../img/border_pc.png) top center repeat-x,url(../img/border_pc.png) bottom center repeat-x;
    background-size: 4px;
    padding: 0px 0 51px;
    margin-top: -49px;
    }
	
}