@charset "utf-8";

/*
    background-color:#ffffff;
    color:#333333;
    background-color:#333333;
    color:#333333;
*/

/* CSS Font */
@font-face {
  font-family: KYOPPI;
  src: url(kyoppi.ttf);
}
.f_icon {
    font-family:"KYOPPI";
}

/*
    @font-face {
      font-family: OTF;
      src: url(ltg.otf);
    }
    @font-face {
      font-family: CHIARO;
      src: url(ltg.otf);
    }
@font-face {
  font-family: KIARO;
  src: url(kiaro.otf);
}
@font-face {
  font-family: JS70;
  src: url(JapanSans70.otf);
}
@font-face {
  font-family: JS100;
  src: url(JapanSans100.otf);
}
*/

#sns {
    margin:0% auto;
    padding:2% 0;
    display:flex;
    width:40%;
}
#sns li {
    margin:0 1%;
    width:18%;
    text-align:center;
}
#sns li a {
    display:inline-block;
    font-size:82px;
    width:80px;
    border-radius:10%;
    margin:0;
    padding:0;
    text-indent:-1px;
    background-color:#fff;
}
#sns li a:hover {
    opacity:1.0;
    transform: translate(0,-10%);
}
#sns #twitter a {
    color:#00aced;
}
#sns #facebook a {
    color:#305097;
}
#sns #gooplus a {
    color:#db4a39;
}
#sns #line a {
    color:#00c300;
}
#sns #hatena a {
    color:#008fde;
}
/* CSS Document */
.clearfix:after {
  content: " ";
  display: block;
  height: 0;
  clear: both;
  visibility: hidden;
}

.clearfix { display: inline-table; }
* {
	box-sizing:border-box;
}
a {
	text-decoration:none;
	color:inherit;
}
a:hover {
    opacity:0.5;
}
dt,dd {
    vertical-align:top;
	display:inline-block;
}
a:link {
	color:inherit;
}
a:visited {
	color:inherit;
}
a:hover {
	color:inherit;
}
.link {
    color:blue !important;
    text-decoration:underline !important;
}
.linked {
	/*
    color:rgba(0,0,255,1.0) !important;
    color:rgba(196,196,255,1.0) !important;
    text-decoration:underline !important;
    border-bottom:solid 1px #d44;
	*/
    background-color:#d44;
    border-radius:4px;
    border:solid 2px #f88;
	color:white;
    letter-spacing:0.05em;
    padding:1.5%;
    margin:1.5%;
}
.linked a {
    width:100%;
}
.linked img {
    width:100%;
}
.linked:hover {
    opacity:0.5;
}
table {
    width:80%;
    border-collapse:collapse;
    border-color:grey;
	margin:20px auto;
}
th,td {
	border:solid 1px grey;
	padding:10px;
	text-align:left;
	vertical-align:top;
}

b {
    font-weight:bold;
}

/*
#price_menu {
    width:40%;
}
#price_num {
    width:60%;
}
*/
figure img {
    width:100%;
}
* {
	font-family:"Quicksand", "Noto Serif JP", sans-serif;
}
body {
    /*
    max-width:1600px;
    */
	width:100%;
    margin:0 auto;
	font-size:100%;
    letter-spacing:-0.05em;
    background-color:#fff;
    color:#333333;
}
em {
}
strong {
    font-size:200%;
}
.wrap_no {
    white-space:nowrap;
}
.text_title {
    font-size:130%;
}
.text_big {
    font-size:125%;
}
.box_ratio {
    position: relative;
    width: 100%;
}
.box_ratio:before {
    content:"";
    display: block;
}
.r_25:before {
    padding-top:25%;
}
.r_33:before {
    padding-top:33.3333%;
}
.r_40:before {
    padding-top:40%;
}
.r_50:before {
    padding-top:50%;
}
.r_66:before {
    padding-top:66.6666%;
}
.r_75:before {
    padding-top:75%;
}
.r_100:before {
    padding-top:100%;
}
.tb {
    display:flex;
    flex-wrap:wrap;
    border:dotted 1px #5e56cb;
}
.tb>.cell:nth-child(2n+1) {
    width:40%;
}
.tb>.cell:nth-child(2n) {
    width:60%;
}

.plt_paper {
    background-image: url(../images/plt_paper_3.png);
    background-repeat:repeat;
    padding:2%;
}
.bor_s {
    border:dotted 2px grey;
    padding:2%;
}
.text_caution {
    font-size:80%;
}
.btn_acordion {
    color:#333333;
    width:100%;
    padding:5px;
    margin:1% 0 0%;
    letter-spacing:0.25em;
	cursor:pointer;
}
.btn_acordion:hover {
    opacity:0.5;
}
.text_shadow {
    text-shadow: 2px 2px 2px rgba(30,30,30,1);
    -webkit-text-shadow: 2px 2px 2px rgba(30,30,30,1);
}
.text_outline {
    text-shadow: #bb7700 1px 1px 0px, #bb7700 -1px 1px 0px,
             #bb7700 1px -1px 0px, #bb7700 -1px -1px 0px;
}
.area_flex {
    display:flex;
}
.wr_33 {
    width:33.3333%;
    padding:2%;
}
.box_flwx {
    border:solid 1px gray;
}
.box_flwx figure {
    text-align:center;
}
.box_flwx img {
    width:100%;
}
.link_nom {
    color:rgba(196,196,255,1.0) !important;
    text-decoration:underline;
    
}
/**/
header {
    /*
    background-color:#ffffff;
    background-image:url(../images/bkgdot1.png),url(../images/bkgdot2.png);
    background-repeat:no-repeat,no-repeat;
    background-position:top left,bottom right;
    */
    background-color:rgba(255,255,255,0.5);
}
#logo_area {
    width:40%;
    padding-top:2%;
}
#logo_area img {
    animation: anime_scale 5s ease -5s infinite alternate;
}
#gnav_area {
    /*
    width:60%;
    padding-left:2.5%;
    padding-top:2.5%;
    */
    background-color:rgba(41, 30, 30, 0.25);
}
h1 {
    /*
    font-size:90%;
    letter-spacing:0.25em;
    width:100%;
    text-align:center;
    margin-top:-3%;
    padding:0% 2%;
    */
}
#gnav_area ul {
    width:auto;
    margin:0%;
    margin-left:auto;
}
#gnav_area li {
    width:25%;
    padding:0 1%;
    margin:0 2%;
    border-radius: 8px;
    border:solid 2px rgba(255,255,255,0.95);
    background-color:rgba(255,255,255,0.75);
}
#gnav_area .icon {
    width:100%;
    margin-bottom:-0.5em;
}
#gnav_area a {
    display:inline-block;
    text-align:center;
    width:100%;
    height:100%;
    padding:3% 10%;
    background-color:rgba(255,255,255,0.00);
    color:#333333;
    /*
    animation: anime_translate 2s ease -2s infinite alternate;
    border:solid 4px rgba(255,255,255,0.75);
    */
    font-size:130%;
    border-radius:8px;
}
#gnav_area a:hover {
    opacity:1.0;
    animation: anime_big 1s ease -1s infinite alternate;
}
.tshadow_black {
    text-shadow: 2px 2px 2px rgba(0,0,0,1);
    -webkit-text-shadow: 2px 2px 2px rgba(0,0,0,1);
}
#article_news a {
    color:rgba(196,196,255,1.0);
    text-decoration:underline;
    
}
#article_story .linked{
    margin-bottom:1%;
}
.div_movie {
    position: relative;
    margin:0 auto;
    width: 100%;
}
.cont_movie {
    width:100%;
}
.m_div_movie {
    position: relative;
    margin:0 auto;
    width: 100%;
    height:600px;
}
.m_cont_movie {
    width:100%;
    height:100%;
}
.box_movie {
    position: relative;
    width: 100%;
    margin:0 auto;
    padding-top: 16.25%;
}
.movie {
    position: absolute;
    top: 0;
    right: 0;
    width: 100% !important;
    height: 100% !important;
}
/*-----*/
/*
.background {
	width: 100%;
	height: 0;
	padding-top: calc(1200 / 1200 * 100%); 	background: url(../images/background.jpg) center center / cover no-repeat;
}
*/
#main {
    width:100%;
}
#main_content {
    width:100%;
    background-image:url(../images/background_pc.jpg);
    background-repeat:no-repeat;
    background-attachment:fixed;
    background-position:top center;
    background-size:cover;
}
#cont_main {
    float:left;
    width:66.66%;
}
#cont_side {
    float:right;
    width:33.33%;
    min-width:320px;
}
#main_area {
    position:relative;
    with:100%;
}
#back_img {
    with:100%;
    position:relative;
    top:0;
    left:0;
}
#back_img img {
    width:100%;
}
#main_img {
    width:100%;
    position:absolute;
    top:0;
    left:0;
}
#main_img img {
    width:100%;
}
#main_vimg {
    position:relative;
    width:100%;
    margin:0;
    padding:0;
}
#main_vimg img {
    width:100%;
    margin:0;
    padding:0;
}
.main_vimg_parts {
    position:absolute;
    opacity:0.0;
}
#dlstore {
    margin:0.75% 2.5% 0;
    padding:0;
}
#dlstore a {
    margin:0;
    padding:0;
}
#dlbtn {
    font-size:120%;
    right:32px;
    bottom:16px;
    padding:16px;
    border-radius:16px;
    animation: anime_scale 2s ease -2s infinite alternate;
    color:#ffffff;
    border:solid 2px #ccc;
	background: #222;
    /*
    border:solid 4px #e05831;
	background: linear-gradient(to bottom,#FFF,#F89174 10%,#ff6438);
    */
	font-family:sans-serif;
	font-weight:bolder;
	letter-spacing:0.05em;
}
.text_lu {
    position:absolute;
    top:1%;
    left:1%;
    font-size:150%;
}
.text_rd {
    position:absolute;
    bottom:1%;
    right:1%;
    font-size:150%;
}
.text_rd strong {
}
/*-----*/
#main_content {
    padding:1%;
}
.box_wrapper {
    width:auto;
    text-align:center;
    margin:0 auto;
}
.content_box {
    display:inline-block;
    text-align:left;
    border:solid 2px #ffffff;
    border-radius:4px;
    margin:4px;
    background-color:rgba(255,255,255,0.75);
}
.content_box h3 span{
	font-size:150%;
	font-weight:bold;
}

.fc_t_green{
	color:#0a0;
}
.fc_t_blue{
	color:#40a;
}
.fc_t_red{
	color:#d44;
}
.fc_t_parple{
	color:#606;
}
.fc_t_gold{
	color:#d3ae00;
}
.fc_t_grey{
	color:#777;
}
.fc_t_blown{
	color:#a50;
}
.fc_t_skyblue{
	color:#70bced;
}
.fc_t_emeraldgreen{
	color:#00a747;
}

/*
ボックスの色付け(不要ならコメントアウト)
.box_green {
	background-color:rgba(250,255,250,0.8);
	border:solid 2px #0a0;
}
.box_red {
	background-color:rgba(255,250,250,0.8);
	border:solid 2px #d44;
}
.box_blue {
	background-color:rgba(250,250,255,0.8);
	border:solid 2px #40a;
}
.box_parple{
	background-color:rgba(255,252,255,0.8);
	border:solid 2px #606;
}
.box_gold{
	background-color:rgba(255,235,200,0.8);
	border:solid 2px #d3ae00;
}
.box_grey{
	background-color:rgba(250,250,250,0.8);
	border:solid 2px #777;
}
.box_blown{
	background-color:rgba(255,240,220,0.8);
	border:solid 2px #a50;
}
.box_skyblue {
	background-color:rgba(230,250,255,0.8);
	border:solid 2px #70bced;
}
.box_emeraldgreen {
	background-color:rgba(230,255,250,0.8);
	border:solid 2px #00a747;
}

.box_green {
	border:solid 2px #0a0;
}
.box_red {
	border:solid 2px #d44;
}
.box_blue {
	border:solid 2px #40a;
}
.box_parple{
	border:solid 2px #606;
}
.box_gold{
	border:solid 2px #d3ae00;
}
.box_grey{
	border:solid 2px #777;
}
.box_blown{
	border:solid 2px #a50;
}
.box_skyblue {
	border:solid 2px #70bced;
}
.box_emeraldgreen {
	border:solid 2px #00a747;
}
*/

#cont_main .content_box {
    width:45%;
    height:400px;
}
#cont_main .box_big {
    width:90%;
    height:25%;
}
#cont_side .content_box {
    width:100%;
    height:260px;
}
#cont_side #article_news {
    height:300px;
}
#cont_side #article_twitter {
    text-align:center;
    height:320px;
}
#main_content #article_help {
    height:640px;
    max-height:640px;
}

#article_creator {
    height:auto;
}
#article_linked .width100 {
    width:100%;
}
#article_linked .width50 {
    width:50%;
}
#bxcreator {
    width:100%;
    height:400px;
}
#cont_side #article_links {
    height:300px;
}
#cont_side #article_contact {
    height:400px;
}
#article_news dt {
    width:100%;
    border-top:solid 1px white;
}
#article_news dd {
    width:100%;
    border-bottom:solid 1px white;
    margin-bottom:2%;
}
#bxcreator li {
    width:100%;
    height:100%;
    padding:1% 12% 1% 10%;
}
#bxcreator a {
    display:block;
    width:80%;
    margin:0 auto;
}
#bxcreator a span {
    width:100%;
}
#bxcreator a img {
    width:100%;
}
.banner_title {
    font-size:90%;
}
.banner_url {
    font-size:70%;
}
.text_detail {
    width:95%;
}
.table_detail {
    width:100%;
    font-size:90%;
    margin-top:0;
}
.table_detail .tr {
    display:flex;
    margin:0;
    padding:0;
}
.table_detail .th {
    width:20%;
    margin:0;
    padding:1%;
    text-align:center;
    vertical-align:middle;
    border:solid 1px grey;
    font-size:90%;
}
.table_detail .td1 {
    width:80%;
    margin:0;
    padding:1%;
    text-align:left;
    vertical-align:top;
    border:solid 1px grey;
}
.table_detail div {
    padding:2%;
}
.txt_sample {
    width:70%;
    font-size:90%;
    float:left;
}
.img_sample {
    width:30%;
    float:right;
}
.text_creator {
    width:85%;
    padding:1% 5% 1% 5%;
}
.table_detail .banner_s {
    width:40% !important;
}
.table_detail .banner_m {
    width:60% !important;
}

.bxslider li {
  display: none !important;
}
.bx-viewport .bxslider li {
  display: block !important;
}

h2 {
    width:100%;
    font-size:150%;
    margin-top:1%;
    margin-bottom:1%;
    letter-spacing:0.2em;
}

h4 {
    width:100%;
    font-size:110%;
    margin-top:1%;
    margin-bottom:1%;
    letter-spacing:0.1em;
    text-decoration:underline;
}

h3 {
    width:100%;
    font-size:130%;
    text-decoration:underline;
    margin-top:1%;
    margin-bottom:1%;
    letter-spacing:0.2em;
}
h3 .icon {
    width:2em;
    float:left;
    animation: anime_rotate 3s ease -3s infinite alternate;
}

@keyframes anime_rotate {
    0% {transform: rotate(-15deg);}
    100% {transform: rotate(15deg);}
}

@keyframes anime_scale {
    0% {transform: scale(1.0,1.0);}
    100% {transform: scale(0.9,0.9);}
}

@keyframes anime_big {
    0% {transform: scale(1.1,1.1);}
    100% {transform: scale(1.0,1.0);}
}

@keyframes anime_translate {
    0% {transform: translate(0,-2%);}
    100% {transform: translate(0,2%);}
}

h3 span {
    display:inline-block;
    padding-left:1.5%;
    padding-top:0.5%;
}
.box_inner {
    width:100%;
    height:100%;
    padding:1%;
    top:0;
    left:0;
}
.content_detail {
    width:100%;
    height:85%;
    overflow:auto;
    overflow-x:hidden;
}
#article_twitter .content_detail {
    height:100%;
}
.scroll_none {
    overflow:hidden;
}


#article_links ul {
}
#article_links li {
    margin-bottom:2%;
}
#article_links a {
    display:inline-block;
    width:100%;
    border:solid 2px #d3ae00;
    border-radius:4px;
    padding:2%;
}
#form_base {
    margin:0 auto;
}
#form_base dt {
    font-size:90%;
    width:22%;
    padding:0.5%;
    margin-bottom:0.5%;
}
#form_base dd {
    width:72%;
    padding:0.5%;
    margin-bottom:0.5%;
}
#form_base input {
    width:100%;
    padding:2%;
}
#form_base select {
    width:100%;
    padding:2%;
}
#form_base textarea {
    width:100%;
    padding:2%;
}
#form_base #confirm {
    width:auto;
}
#confirm_area {
    text-align:center;
}
#submit_area {
    margin-top:0.2%;
    text-align:center;
}
#form_base #btn_submit {
    width:25%;
    padding:1%;
    margin:0 auto;
}
.mark_caution {
    color:red;
}

footer {
    width:100%;
    background-color:#ffffff;
    background-image:url(../images/bkgdot1.png),url(../images/bkgdot2.png);
    background-repeat:no-repeat,no-repeat;
    background-position:top left,bottom right;
    margin-top:1%;
}
#copyright {
    width:100%;
    text-align:center;
}

/*bx_slider*/
.bxslider {
}
.bxslider li {
}
.bxslider figure {
}
.bxslider img{
    width:100%;
}
.slider_text {
    position:absolute;
    padding:1%;
    background-color:rgba(0,0,0,0.25);
}
.slider_caption {
    position:absolute;
    right:0;
    top:0;
    padding:1%;
    background-color:rgba(0,0,0,0.25);
    font-size:70%;
}

@media screen and (min-width: 1201px){
    #main_content {
        background-image:url(../images/background_wd.jpg);
    }
}

/*-------------------------------------
PCの場合
-------------------------------------*/
@media screen and (min-width: 681px){
	.mb_only {
		display:none;
	}
    #logo {
        top:10vw;
        left:1%;
        width:38vw;
        max-width:500px;
        min-width:200px;
    }
    #mv_gamess {
        height:35vw;
        max-height:360px;
        min-height:240px;
        bottom:-1%;
        left:-1%;
    }
    #mv_chara1 {
        right:-40vw;
    }
}
@media screen and (min-width: 1401px){
    #mv_gamess {
        bottom:0%;
        left:-3%;
        max-height:420px;
    }
    #mv_chara1 {
        right:-40vw;
    }
}

/*-------------------------------------
PC:ウインドウ普通の場合
-------------------------------------*/
@media screen and (min-width: 1181px) and (max-width: 1400px){
    body {
        font-size:100%;
    }
}

/*-------------------------------------
PC:ウインドウ狭いの場合
-------------------------------------*/
@media screen and (max-width: 1180px){
    #mv_chara1 {
        right:-40vw;
    }
    body {
        font-size:80%;
        background-color:#ffffff;
    }
    .m_div_movie {
        height:320px;
    }
    #dlbtn {
        font-size:110%;
        padding:8px;
        border-radius:8px;
        border:solid 2px rgba(255,255,255,0.9);
        animation: anime_big 4s ease -4s infinite alternate;
    }
    #sns {
        width:80%;
        margin:0 auto;
        padding:0;
    }
    #sns li {
        margin:0 1%;
        /*
        width:3.95em;
        height:3.95em;
        */
        text-align:center;
    }
    #sns li a {
        font-size:4em !important;
        width:100%;
        height:100%;
        margin:0;
        padding:0;
    }
    #gnav_area li a {
        font-size:100%;
    }
    #cont_main {
    }
    #cont_side {
        min-width:200px;
    }
    .content_box {
        float:none;
        margin:1px;
        width:99%;
        height:auto;
    }
    #cont_side #article_news {
        height:220px;
    }
    #cont_side #article_twitter {
        height:220px;
    }
    #cont_main #article_creator {
        width:90%;
        height:500px;
        max-height:500px;
    }
    #article_creator .content_detail {
        overflow:visible;
    }
    #main_content #article_help {
        height:400px;
        max-height:400px;
    }
    #bxcreator {
        height:440px;
    }
    #bxcreator .table_detail{
        width:95%;
        margin-left:6%;
        font-size:100%;
    }
    #bxcreator th{
        width:100%;
    }
    #bxcreator td{
        width:100%;
    }
    #cont_side #article_links {
        height:220px;
    }
    #cont_side #article_contact {
        height:320px;
    }
    #bxcreator li {
        padding-left:5%;
    }
    #cont_main .box_small {
        height:330px;
    }
    .table_detail {
        font-size:90%;
    }
    .text_creator {
        width:95%;
        font-size:120%;
        padding:2.5%;
        margin-top:0%;
    }
    .txt_sample {
        float:none;
        width:100%;
    }
    .img_sample {
        float:none;
        width:40%;
        margin:0 auto;
    }
    .table_detail {
        width:90%;
        margin:0 auto;
    }
    .table_detail .th {
        width:30%;
    }
    .table_detail .td1 {
        width:70%;
    }
}

/*-------------------------------------
スマホの場合
-------------------------------------*/
@media screen and (max-width: 680px){
    .pc_only {
		display:none;
	}
    body {
        font-size:90%;
        background-color:#ffffff;
    }
    #cont_main {
        float:none;
        width:98%;
        margin:0 auto;
    }
    #cont_side {
        float:none;
        width:98%;
        margin:0 auto;
    }
    footer {
        margin-bottom:120px;
		background-image:none;        
    }
    header {
        position:fixed;
        bottom:0;
        z-index:9999;
        width:100%;
	    background-size:12.5%,12.5%;
    }
    #header_mb {
        width:100%;
	    background-color:#ffffff;
	    background-image:url(../images/bkgdot1.png),url(../images/bkgdot2.png);
	    background-repeat:no-repeat,no-repeat;
	    background-position:top left,bottom right;
	    background-size:25%,25%;
    }
    #logo_mb {
        width:65%;
        margin:0 auto;
    }
    #logo_mb img {
        animation: anime_scale 5s ease -5s infinite alternate;
    }
    #logo_area {
    }
    #gnav_area {
        width:100%;
        padding:2% 0%;
        background-color:rgba(255,255,255,0.9);
    }
    #gnav_area li {
        width:23%;
        height:54px;
        margin:0 1%;
        border:solid 2px rgba(0,0,0,0.1);
    }
    #gnav_area li a {
        padding:0% 0;
        font-size:80%;
        /*
        border:solid 2px rgba(255,255,255,0.75);
        */
    }
    #gnav_area .icon {
        width:3.0em;
        margin-bottom:-0.25em;
    }
    #dlbtn {
        right:12px;
        bottom:12px;
        padding:4px;
        font-size:80%;
    }
    #main_content {
        background-image:url(../images/background_mb.jpg);
        background-position:center center;
        background-size:100% cover !important;
    }

    .text_rd {
        font-size:80%;
    }
    #main {
    }
    #gnav_area a {
        font-size:60%;
    }
    #cont_main .content_box {
        width:99%;
        height:auto;
    }
    #cont_main .box_big {
        width:99%;
        height:auto;
    }
    #cont_side .content_box {
        width:99%;
        height:auto;
        max-height:280px;
    }
    #cont_side #article_news {
        height:250px;
    }
    #cont_side #article_links {
        height:300px;
        max-height:300px;
    }
    #cont_side #article_linked {
        height:320px;
        max-height:320px;
    }
    #cont_side #article_contact {
        height:360px;
        max-height:360px;
    }
    #cont_main #article_creator {
        width:98%;
        height:720px;
        max-height:720px;
        margin:0;
        padding:0;
    }

    #bxcreator {
        height:680px;
        padding-left:0.5%;
    }
    .table_detail {
        width:83%;
    }
    #bxcreator li {
    }
    .content_detail {
        max-height:320px;
    }
    .twitter-timeline {
        max-height:240px;
    }
    .box_margin {
        margin-bottom:0%;
    }
    #index_mainvisual {
        height:1px;
    }
    .table_detail .tr {
        display:block;
    }
    .table_detail .th {
        width:100%;
        background-color:rgba(255,255,255,0.2);
    }
    .table_detail .td1 {
        width:100%;
    }
    #sns li a {
        /*
        font-size:62px;
        width:60px;
        height:60px;
        */
    }
}

/*-------------------------*/
/*ヘルプとFAQ*/
/*-------------------------*/
	.renewdate {
		float:left;
		margin:0;
		padding-top:1%;
	}
	.linkbar {
		float:right;
		margin:0;
		display:inline-block;
		background-color:rgba(32,32,255,1.0);
		border-radius:8px;
		border:solid 2px rgba(-32,-32,255,1.0);
		padding:0.5% 2%;
		text-align:center;
	}
    .renew {
        width:100%;
        height:auto;
        max-width:800px;
        text-align:left;
        color:rgba(255,255,255,1.0);
        margin:1% 0;
    }

    .topics {
        background-color:rgba(48,19,11,1.0);
    }
    .topics .wrap {
        width:100%;
        max-width:800px;
        margin:0 auto;
        text-align:left;
        color:rgba(255,255,255,1.0);
    }
    
    /*タイトル*/
    .topics .title{
        width:100%;
        padding-left:2%;
        margin-bottom:1%;
        line-height:2em;
        background-color:rgba(96,38,22,1.0);
    }
    /*画像*/
    .topics figure {
        width:100%;
        margin:0;
        padding:0;
    }
    .topics img {
        width:100%;
    }
    /*説明文*/
    .topics .text{
        text-align:left;
        padding:0%;
        line-height:1.3em;
        /*
        overflow-y:auto;
        */
    }
    .topics .close {
        display:inline-block;
        margin:1% 0;
        border:solid 0.5px white;
        font-size:90%;
    }
@media screen and (max-width: 680px){
    .topics .title {
        font-size:0.7em;
    }
    .topics .text {
        font-size:70%;
    }
}