@import url('https://webfont.fontplus.jp/accessor/script/fontplus.js?W2Q3L3srNOQ%3D&box=Hf6NG-SEj0s%3D&aa=1&ab=2');
@import url('css/base.css');
* {
font-family: "FP-ヒラギノUD角ゴ StdN W3";
word-break:break-all;
}
h1 a {
display: inline-block;
}

h2 a {
display: block;
color: black;
text-decoration: none;
border-bottom: 1px dotted transparent;
}
#TOP {
text-align: center;
}
#TOP a {
display: inline-block;
color: black;
padding: .2em;
margin: .8em .2em;
text-decoration: none;
border-bottom: none;
}

ul.wishlist li a::before {
  margin: 0 0 0 5px;
  font-size: 24px;
  font-family: "Font Awesome 5 Free";
  font-weight: 900;
}
ul.wishlist li a::before{
  content: '\f06b';
}
ul.wishlist li{
list-style: none;
}
a{
text-decoration:none;
border-bottom: dashed 1px #333;
}
a:hover{
transition:1s;
background: #ccc;
border-bottom: dashed 1px #003;
}
html, body {
margin: 0;
padding: 0;
background: url('bg_ptn.png');
background-attachment: fixed;
scroll-behavior: smooth;
}
img {
max-width: 100%;
height: auto;
}
.attention {
color: red;
}
h1 {
font-size: 13px;
}
h2 {
font-size: 21px;
}
h4 {
font-size: 1.2em;
padding: .5rem 1rem;
color: #FF4097;
border-radius: 100vh;
background-image: -webkit-gradient(linear, right top, left top, from(#9be15d), to(#00e3ae));
background-image: -webkit-linear-gradient(right, #9be15d 0%, #00e3ae 100%);
background-image: linear-gradient(to left, #9be15d 0%, #00e3ae 100%);
}
h5 {
  padding: 0.5em;
  background: aliceblue;
  box-shadow: 0 0 4px rgba(0, 0, 0, 0.23);
}
h6 {
  color: #6594e0;
  border-bottom: dashed 2px #6594e0;
}
.ancor {
font-size: 1.2em;
position: fixed;
top: 180px;
right: 20%;
padding: 0.2em 0.5em;
margin: 2em 0;
background: rgba(153, 0, 0, 0.8);
box-shadow: 0px 0px 0px 10px rgba(153, 0, 0, 0.8);
border: dashed 2px white;
}
.ancor p {
margin: 0;
padding: 0;
}
.ancor a {
text-decoration: none;
color: #ffff66
}
.buy_area {
position: relative;
padding: 35px 20px 15px;
margin: 2.5em auto;
width: 90%;
color: #555555; /* 文字色 */
background-color: #e8ddbd;
box-shadow: inset 0 0 40px rgba(204, 186, 136, 1), 0 2px 2px #ccc;
}
.buy_area_title {
position: absolute;
top: -15px;
left: 30px;
padding: 4px 20px;
color: #555555; /*タイトル色*/
font-weight: bold;
background-color: rgba(255, 255, 255, .4);
border-left: 2px dotted rgba(0, 0, 0, .1);
border-right: 2px dotted rgba(0, 0, 0, .1);
box-shadow: 0 0 5px rgba(0, 0, 0, 0.2);
transform: rotate(-5deg);
}
.en_ver {
background: #ccffff;
padding: .5em;
}
address {
text-align: center;
text-decoration: none;
font-style: normal;
padding-top: 3em;
padding-bottom: 1em;
font-size: .8em;
background: #ffccff;
clear: both;
}
h1, h1 * {
margin: 0;
padding: 0;
}
h1 {
background: #ffccff;
text-align: center;
}
h1 * {
vertical-align: top;
}
/*ここから*/
h2 {
position: relative;
background: #dfefff;
box-shadow: 0px 0px 0px 5px #dfefff;
border: dashed 2px white;
padding: 0.2em 0.5em;
color: #454545;
}
h2:after {
position: absolute;
content: '';
left: -7px;
top: -7px;
border-width: 0 0 15px 15px;
border-style: solid;
border-color: #fff #fff #a8d4ff;
box-shadow: 1px 1px 1px rgba(0, 0, 0, 0.15);
}
/*ここまで*/
h3 {
background: linear-gradient(transparent 70%, #a7d6ff 70%);
}
.item_con {
padding: 0.5em 1em;
margin: 0;
background: #f0f7ff;
border: dashed 2px #5b8bd0; /*点線*/
}
.item_con p {
margin: 0;
padding: 0;
}
.message_box {
clear: both;
border: 4px solid #82636b;
border-radius: 240px 15px 185px 15px / 15px 200px 15px 185px;
margin: 2em 0;
padding: 2em;
}
.tweet_box {
height: 480px;
overflow-y: auto;
overflow-x: hidden;
}
.chiitan_img {
clear: both;
display: block;
width: 42%;
float: left;
vertical-align: top;
margin: 2em 0;
padding: 2em;
position: relative;
z-index: 1;
text-align: right;
}
.tweetb {
width: 27%;
float: left;
}
.banners {
clear: left;
}
.banners img {
height: 100px;
width: auto;
}
.header_b {
height: auto;
}
.sns_zone {
font-size: .9em;
}
.sns_zone li {
margin-bottom: 0.5em;
}
.sns_zone h2 {
clear: left;
}
.sns_zone div {
vertical-align: top;
text-align: center;
display: inline-block;
}
.sns_zone div a {
text-decoration: none;
}
.sns_zone div img {
width: 98%;
height: auto;
margin-left: 1%;
}
.impact_mess {
font-weight: bold;
color: red;
}
.fands img {
width: 100%;
height:auto;
}
@media only screen and (min-width: 769px) {
.fands {
float: right;
width:15%;
margin-left: 1em;
}
div.topics div {
width: 46%;
display: inline-block;
vertical-align: top;
}
div.topics div img {
width: 240px;
height: auto;
}
.header_b {
width: 580px;
margin-left: 90px;
}
.main_container {
width: 760px;
margin: auto;
}
.content_box {
display: block;
background-color: #fff;
margin: 2em 0;
padding: 2em;
position: relative;
z-index: 1;
}
.content_box::before, .content_box::after {
border-radius: 4px;
box-shadow: 0 1px 4px rgba(0, 0, 0, .3);
content: "";
height: 100%;
position: absolute;
width: 100%;
}
.content_box::before {
background-color: rgba(255, 255, 255, .5);
left: 0;
top: 0;
z-index: -1;
}
.content_box::after {
background-color: #a4f5c8;
top: 5px;
left: 5px;
z-index: -2;
}
.content_box2::after {
background-color: #ffffcc;
top: 5px;
left: 5px;
z-index: -2;
}
.otayori {
width: 80%;
margin: auto;
}
/* click view base */
.view {
width: 300px;
height: 200px;
margin: 10px;
float: left;
border: 10px solid #fff;
overflow: hidden;
position: relative;
text-align: center;
box-shadow: 1px 1px 2px #e6e6e6;
cursor: default;
background: #fff url(base.jpg) no-repeat center center
}
.view .mask, .view .content {
width: 300px;
height: 200px;
position: absolute;
overflow: hidden;
top: 0;
left: 0
}
.view img {
display: block;
position: relative
}
.view h2 {
text-transform: uppercase;
color: #fff;
text-align: center;
position: relative;
font-size: 17px;
padding: 10px;
background: rgba(0, 0, 0, 0.8);
margin: 20px 0 0 0
}
.view p {
position: relative;
color: #fff;
padding: 10px 20px 20px;
text-align: center
}
.view a.info {
display: inline-block;
text-decoration: none;
padding: 7px 14px;
background: #000;
color: #fff;
text-transform: uppercase;
box-shadow: 0 0 1px #000
}
.view a.info:hover {
box-shadow: 0 0 5px #000
}
/* click view type7 */
.view-seventh img {
transition: all 0.5s ease-out;
opacity: 1;
}
.view-seventh .mask {
background-color: rgba(77, 44, 35, 0.5);
transform: rotate(0deg) scale(1);
opacity: 0;
transition: all 0.3s ease-out;
transform: translateY(-200px) rotate(180deg);
}
.view-seventh h2 {
transform: translateY(-200px);
transition: all 0.2s ease-in-out;
}
.view-seventh p {
transform: translateY(-200px);
transition: all 0.2s ease-in-out;
}
.view-seventh a.info {
transform: translateY(-200px);
transition: all 0.2s ease-in-out;
}
.view-seventh:hover img {
transform: rotate(720deg) scale(0);
opacity: 0;
}
.view-seventh:hover .mask {
opacity: 1;
transform: translateY(0px) rotate(0deg);
transition-delay: 0.4s;
}
.view-seventh:hover h2 {
transform: translateY(0px);
transition-delay: 0.7s;
}
.view-seventh:hover p {
transform: translateY(0px);
transition-delay: 0.6s;
}
.view-seventh:hover a.info {
transform: translateY(0px);
transition-delay: 0.5s;
}
h1 {
heighnt: 220px;
text-align: center;
}
.chiical {
width: 680px;
margin: auto;
}
.sp {
display: none;
}
.sns_zone div {
}
}
@media only screen and (min-width: 1200px) {
.header_b {
width: 800px;
margin-left: 200px;
}
.main_container {
width: 1200px;
margin: auto;
}
.chiical {
width: 1200px;
margin: auto;
}
.sns_zone div {
width: auto;
}
}
@media only screen and (max-width: 768px) {
h1 a {
display: block;
}
.fands {
width:40%;
height:auto;
margin-left: 1em;
}
.ancor {
top: 3em;
right: 1em;
}
div.topics div img {
width: 60%;
height: auto;
}
.otayori {
width: 80%;
}
h1 img.header {
width: 84%;
height: auto;
}
h1 img.mail {
width: 13%;
height: auto;
}
.header_b {
width: 90%;
margin-left: 5%;
height: auto;
}
.sp {
display: block;
width: 90%;
margin-left: 5%;
}
.chiical {
display: none;
}
.chiitan_img, .prof_box, .tweetb {
width: 95%;
float: none;
}
.banners img {
width: 32%;
height: auto;
}
.sns_zone div {
}
.images {
width: 90%;
height: auto;
}
}




a.sns_data:link, a.sns_data:visited {
color: #000;
}
a.sns_data:hover {
color: #ccc;
}
a.sns_data::before {
  margin: 0 0 0 5px;
  padding-left: 5px;
  font-size: 24px;
  font-family: "Font Awesome 5 Brands";
  font-weight: 900;
}
a[href*="twitter.com"]::before{
    content: '𝕏';
    font-size: 180%;
    font-family: unset;
    font-weight: bold;
}
a[href*="x.com"]::before{
    content: '𝕏';
    font-size: 180%;
    font-family: unset;
    font-weight: bold;
}
a[href*="instagram.com"]::before{
  content: '\f16d';
}
a[href*="facebook.com"]::before{
  content: '\f09a';
}
a[href*="youtube.com"]::before{
  content: '\f167';
}
a[href*="weibo.cn"]::before{
  content: '\f18a';
}
a[href*="threads.net"]::before{
/*  content: '\e618';*/
    font-size: 220%;
    font-family: unset;
    font-weight: 900;
  content: '@';
}
a[href*="discord.com"]::before{
  content: '\f392';
}
a[href*="tiktok.com"]::before{
content:'\e07b';
}
a[href*="ameblo.jp"]::before{
  font-family: "Font Awesome 5 free";
content:'\f781';
}
a[href*="charando"]::before{
  font-family: "Font Awesome 5 free";
content:'\f015';
}