@media screen and (min-width: 769px){
img{
	max-width:100%;
	height:auto;
	width /***/:auto;
	border:0;
}
#container{
	width:100%;
}
/* ▲いじるな危険▲ */

/* ここからあなたのCSSを記入してね */


/*--HTML5-----------------------------------------------------------*/

article,aside,details,footer,header,hgroup,menu,nav,section,summary {
	display: block;
}

* html body {
        background: url(null) fixed;
}

body {
	font-family:'メイリオ',Meiryo,'ヒラギノ角ゴ Pro W3','Hiragino Kaku Gothic Pro','ＭＳ Ｐゴシック',sans-serif;
	margin:0px 0px 0px 0px;
	padding:0px 0px 0px 0px;
	background:#ffffff;
	text-align:center;
}

.img {
  background: url("img.jpg");
}

.webp .img {
  background: url("img.webp");
}

header {
	width:100%;
	height:70px;
	border:display:none;
	margin:0px 0px 0px 0px;
	padding:0px 0px 0px 0px;
}

#top_head {
	width:980px;
	border:display:none;
	text-align:left;
	height:70px;
 	margin:0px auto 0px auto;
}

#top_head .icon{
	width:240px;
	height:60px;
	float:left;
	border:display:none;
	padding:0px 0px 0px 0px;
 	margin:5px 0px 0px 0px;
}

#top_head h1{
	width:350px;
	text-align:left;
	border:display:none;
	color:#000000;
	font-size:14px;
	float:left;
	font-weight:normal;
	padding:0px 0px 0px 0px;
 	margin:25px 0px 0px 10px;
}

/*--グローバルメニュー-----------------------------------------------------------*/


#global-menu{
	width:980px;
	height:40px;
	border:display:none;
	padding:0px 0px 0px 0px;
 	margin:0px auto 0px auto;
}

#global-menu nav {
	width: 100%;
	margin:0px 0px 0px 0px;
	padding:0px 0px 0px 0px;
}

#global-menu nav ul{
	width:980px;
	height: 40px;
	margin:0px auto 0px auto;
	padding:0px 0px 0px 0px;
}

#global-menu nav li{
	width:162px;
	background: #ffc9d2;
	border-right:solid 1px #ecf0f1;
	text-align: center;
	font-size:12px;
	list-style:none;
	float: left;
	height: 40px;
	line-height:40px;
	padding:0px 0px 0px 0px;
 	margin:0px 0px 0px 0px;
}

#global-menu nav li:last-child{
	border-right:solid 0px #ecf0f1;
}


#global-menu nav li a:link{
	color:#333333;
	font-weight:bold;
	display: block;
	text-decoration:none;

}

#global-menu nav li a:visited{
	color:#333333;
	font-weight:bold;
	display: block;
	text-decoration:none;
}

#global-menu nav li a:hover{
	background: #ecf0f1;
	color:#333333;
	font-weight:bold;
	display: block;
	padding:0px 0px 0px 0px;
	text-decoration:none;
}


#pannavi {
	width:980px;
	height:40px;
 	margin:0px auto 0px auto;
	padding:0px 0px 0px 0px;
}

#pannavi nav {
	width:100%;
	height:40px;
	color: #666666;
	margin:0px 0px 0px 0px;
	padding:0px 0px 0px 0px;
	margin-right: auto;
	margin-left: auto;
}

#pannavi nav a:link{
	color: #ea839e;
	text-decoration:none;
}

#pannavi nav a:visited{
	color: #ea839e;
	text-decoration:none;
}

#pannavi nav a:hover{
	color: #000000;
	text-decoration:none;
}


#pannavi nav div{
	height:40px;
	line-height:40px;
	float:left;
	text-align:left;
	font-size:12px;
	margin:0px 0px 0px 0px;
	padding:0px 0px 0px 0px;
}

/*--枠ー-----------------------------------------------------------*/


#wrapper {
	width:980px;
	border:display:none;
	background: #ffffff;
	padding:0px 0px 0px 0px;
 	margin:0px auto 0px auto;
}


#wrapper a:hover img{
	opacity:0.8;
	filter: alpha(opacity=80);
	-ms-filter: "alpha( opacity=80 )";
	background: #fff;

}

/*--コンテンツ-----------------------------------------------------------*/


#contents {
	width:670px;
	float:left;
	border::display:none;
 	margin:0px 0px 0px 0px;
	padding:0px 0px 0px 0px;
}
#contents p{
	font-size:14px;
	text-align:left;
	line-height:180%;
	color:#333333;
	margin:10px 10px 10px 10px;
	padding:0px 0px 0px 0px;
}
article {
	width:670px;
	float:left;
	background: #ffffff;
	margin:0px 0px 0px 0px;
	padding:0px 0px 0px 0px;
}


article h1{
        position: relative;
        padding: 0.5rem 2rem calc(1rem + 1px);
        background: #ff97a8;

}

article h1:before {
        position: absolute;
        top: -7px;
        left: -7px;
        width: 100%;
        height: 100%;
        content: '';
        border: 2px solid #5f6363;
}
.cont1{
	width:670px;
	float:left;
	border:display:none;
	margin:10px 0px 10px 0px;
	padding:0px 0px 0px 0px;
}

.cont1 h2{
	width:100%;
	font-size:18px;
	color:#333333;
	text-indent:10px;
	text-align:left;
	margin:10px 0px 10px 0px;
	padding:5px 0px 5px 0px;
        background: #ffffff;                 /* 背景色 */
        border-top: solid 2px #ff97a8;       /* 上枠 */
        border-right: none;                  /* 右枠 */
        border-bottom: solid 2px #ff97a8;    /* 下枠 */
        border-left: none;                   /* 左枠 */
}

.cont1 h3{
	width:100%;
	font-size:18px;
	border-left:solid 2px #000000;
	color:#333333;
	text-indent:10px;
	text-align:left;
	float:left;
	margin:20px 0px 10px 0px;
	padding:0px 0px 0px 0px;
}

.cont1 h4{
	width:90%;
        padding:5px 10px;  /*内側の余白*/
        border-bottom:2px dashed #a61919;  /*下線の太さ 種類 色*/
        background:url(../img/point.png.webp)no-repeat;
        text-indent:35px;
        height:35px;
        line-height:35px;
}



.font1{
	font-size:16px;
	text-align:left;
	text-indent:15px;
	color:#ff0000;
	line-height:180%;
	font-weight:bold;
	margin:10px 10px 10px 10px;
	padding:0px 0px 0px 0px;
}
/* 条件でパパを探す */
#papa-sagasu{
	width:670px;
	border:display:none;
	padding:10px 0px 0px 0px;
 	margin:0px auto 0px auto;
	background: #ffffff;
}

#papa-sagasu nav {
	width: 100%;
	margin:0px 0px 0px 0px;
	padding:0px 0px 0px 0px;
}

#papa-sagasu nav ul{
	width:670px;
	float:left;
	margin:0px 0px 0px 0px;
	padding:0px 0px 10px 0px;
	background: #fff0f5;
}

#papa-sagasu nav li{
	width:210px;
	background: #ffffff;
	text-align: center;
	font-size:12px;
	list-style:none;
	float: left;
	line-height:50px;
	padding:0px 0px 0px 0px;
 	margin:5px 5px 5px 5px;
	border-top-left-radius: 25px;
	border-top-right-radius: 25px;
	border-bottom-left-radius: 25px;
	border-bottom-right-radius: 25px;
        border-top: solid 1px #ff97a8;       /* 上枠 */
        border-right: solid 1px #ff97a8;     /* 右枠 */
        border-bottom: solid 1px #ff97a8;    /* 下枠 */
        border-left: solid 1px #ff97a8;       /* 左枠 */
}

#papa-sagasu nav li:last-child{
	border-right:solid 0px #ecf0f1;

}


#papa-sagasu nav li a:link{
	color:#333333;
	font-weight:bold;
	display: block;
	text-decoration:none;
	border-top-left-radius: 25px;
	border-top-right-radius: 25px;
	border-bottom-left-radius: 25px;
	border-bottom-right-radius: 25px;

}

#papa-sagasu nav li a:visited{
	color:#333333;
	font-weight:bold;
	display: block;
	text-decoration:none;

}

#papa-sagasu nav li a:hover{
	background: #ecf0f1;
	color:#333333;
	font-weight:bold;
	display: block;
	padding:0px 0px 0px 0px;
	text-decoration:none;


}

/*--サイド-----------------------------------------------------------*/


#side_menu{
	width:300px;
	float:right;
	border:display:none;
 	margin:0px 0px 0px 0px;
	padding:0px 0px 0px 0px;
}

#side_menu1{
	width:300px;
	float:left;
	background: #ffffff;
	border-top-left-radius: 10px;
	border-top-right-radius: 10px;
	border-bottom-left-radius: 10px;
	border-bottom-right-radius: 10px;
	border:solid 1px #000000;
 	margin:0px 0px 0px 0px;
	padding:0px 0px 0px 0px;
}

#side_menu1 h2{
	width:100%;
	font-size:14px;
	height:30px;
	color:#ffffff;
	text-align:left;
	text-indent:10px;
	border-top-left-radius: 10px;
	border-top-right-radius: 10px;
	line-height:30px;
	background:#000000;
	margin:0px 0px 0px 0px;
	padding:0px 0px 0px 0px;
}


#side_menu1 a:link{
	text-align:left;
	display: block;
	text-decoration: none;
	color: #000000 !important;
}
#side_menu1 a:hover{
	text-align:left;
	display: block;
	text-decoration: none;
	color: #ea839e !important;
}
#side_menu1 a:visited{
	text-align:left;
	display: block;
	text-decoration: none;
	color: #000000;
}



#side_menu1 ul{
	list-style:none;
	margin:0px 0px 0px 0px;
	padding:0px 0px 0px 0px;
}
#side_menu1 li{
	font-size:13px;
	margin:10px 0px 0px 10px;
	padding:0px 0px 0px 0px;
}
/* サイドメニュー */
#side_menu p{
	font-size:14px;
	text-align:left;
	line-height:180%;
	color:#333333;
	margin:10px 10px 10px 10px;
	padding:0px 0px 0px 0px;
}

.search_container{
        position: relative;
        width:245px;
        box-sizing: border-box;
	margin:0px 10px 0px 10px;
	padding:0px 0px 10px 0px;
}
.search_container input[type="text"]{
        border: 1px solid #999;
        padding: 3px 5px;
        border-radius: 5px 0 0 5px;
        height: 2.2em;
        overflow: hidden;
}
.search_container input[type="text"]:focus {
        outline: 0;
}
.search_container input[type="submit"]{
        cursor: pointer;
        font-family: FontAwesome;
        font-size: 1.3em;
        border: none;
        background: #dc143c;
        color: #fff;
        width: 2.5em;
        height: 2.5em;
        border-radius: 50%;
        outline : none;
        position: absolute;
        top: -8px;
        right: -15px;
}


#app_ranking {
        color: #333333;                      /* 文字色 */
        background: #ff97a8;                 /* 背景色 */
        padding: 0.30em 0.25em;              /* [上下][左右]の余白 */
        box-shadow: 0px 0px 0px 4px #ff97a8; /* [水平][垂直][ぼかし][距離][色]のBox影 */
        border: dashed 2px #ffffff;          /* [形][太さ][色]の全枠 */
        margin: 0px 0px 15px 0px
}

#side_menu_mm {
        color: #333333;                      /* 文字色 */
        background: #ff97a8;                 /* 背景色 */
        padding: 0.25em 0.25em;              /* [上下][左右]の余白 */
        box-shadow: 0px 0px 0px 4px #ff97a8; /* [水平][垂直][ぼかし][距離][色]のBox影 */
        border: dashed 2px #ffffff;          /* [形][太さ][色]の全枠 */
        margin: 15px 0px 15px 0px

}
/* ↓プロフィール */
.profile {
        background: #ffffff;
        padding: 0.30em 0.25em;              /* [上下][左右]の余白 */
	margin:10px 0px 0px 0px;
}

.profile__img {
        display: block;
        width: 160px;
        height: 160px;
        border-radius:50%;
        margin: 0 auto;
}

.profile__name {
        text-align:center;
        font-weight:bold;
        font-size:1.2rem;
        margin: 1rem auto;
        letter-spacing:.1rem;
        color: 	#000000;
}

.profile__desc {
        color: #fff;
        line-height:1.6rem;
}
/* ↑ここまで */

/* アプリランキング */
.ranking {
        counter-reset: rank;
        padding: 0;
        margin: 0;

}
.ranking li {
        position: relative;
        list-style: none;
        padding: 0;
        margin: 0;
}
 
.ranking li:not(:last-child) {
        margin-bottom: 10px;
}
 
.ranking li::before { /* ラベルと順位のスタイル */
        counter-increment: rank;
        content: counter(rank) " 位";
        position: absolute;
        padding: 8px 14px;
        font-size: 1.2em;
        color: #fff; /* 文字色 */
        background: rgba(0,0,0,0.8); /* 背景色 */
}
 
.ranking img { /* 画像のスタイル */
        width: 300px;
        object-fit: cover;
}

/* フッターはじまり */
footer {
	width:100%;
	clear:both;
	float:left;
	padding:0px 0px 0px 0px;
	margin:20px 0px 0px 0px;
	border-top:solid 1px #f9f9f9;
	background: #ffffff;
}

footer p{
	font-size:10px;
	text-align:center;
	color:#333333;
	margin:10px 0px 0px 0px;
	padding:0px 0px 0px 0px;
}

footer p a{
	color: #333333 !important;
	text-decoration:none;
}
/* キャラクター吹き出し */
/* ----- 共通 ----- */

.talk {
         margin-bottom: 40px;
}

.talk figure img {
         width: 100%;
         height: 100%;
         border: 2px solid #ff97a8;
         border-radius: 50%;
         margin: 0;
}

/* 画像の下のテキスト */
.talk-imgname {
         padding: 5px 0 0;
         font-size: 10px;
         text-align: center;
}

p.talk-text {
         margin: 0 0 8px;
}

p.talk-text:last-child {
         margin-bottom: 0px;
}

/* 回り込み解除 */
.talk:after,.talk:before {
         clear: both;
         content: "";
         display: block;
}

/* ----- 右の場合 ----- */

/* 右画像 */
.talk-Rimg {
         margin-right: 4px;
         margin-top: -1px;
         float: right;
         width: 100px;
         height: 132px;
}

/* 右からの吹き出しテキスト */
.talk-Rtxt {
         position: relative;
         margin-right: 130px;
         padding: 1.2em;
         border: 3px solid #ff97a8;
         background-color: #ffffff;
         border-radius: 5px;
}

/* 右の三角形を作る */
.talk-Rtxt:before {
         position: absolute;
         content: '';
         border: 10px solid transparent;
         border-left: 10px solid #ff97a8;
         top: 15px;
         right: -23px;
}

.talk-Rtxt:after {
         position: absolute;
         content: '';
         border: 10px solid transparent;
         border-left: 10px solid #ffffff;
         top: 15px;
         right: -19px;
}

/* カテゴリページ */
.flex {
         display: flex; /*横並び*/
}  
.flex .image {
         width: 40%; /*画像サイズ指定*/
         margin: 0;
         padding: 0;
         overflow: hidden;
         position: relative;
}
.flex .text {
         width: 60%; 
         margin: 0 0 0 20px;
         padding: 0;
}

/* おすすめアプリ 枠*/
.table {
         border-collapse: collapse;
         margin: 0 auto;
         width: 100%;
         text-align: left;

}
.table-img {
         vertical-align: center;
}
.table-text {
         vertical-align: top;
         width: 70%;
         text-align: left;

}
.table-img > img{
         width: 200px;
}

/* 表２ */
.table-002 {
         border-collapse: collapse;
         text-align: center;
         font-size:14px ;
         width: 100%; /* 幅 */
}
.table-002 th {
         padding: 5px;
         border: solid 1px #333; /* 線の種類 太さ 色 */
         background-color: #dda0dd;
         color: #FFF;

}
.table-002 td {
	 padding: 5px;
         border: solid 1px #333; /* 線の種類 太さ 色 */

}
/*囲み枠 黄*/
.box001 {
         padding: 0.5em 1em;
         margin: 2em 0;
         background: #fff8dc;
         border: dashed 2px #fa8072;/*点線*/
}
.box001 p {
         margin: 0; 
         padding: 0;
} 

/*年齢・職業*/
.box001_name {
         text-align: right;
         font-size:14px;
}

/*囲み枠 青*/
.box002 {
         padding: 0.5em 1em;
         margin: 2em 0;
         background: #f0f8ff;
         border: dashed 2px #6495ed;/*点線*/
}
.box002 p {
         margin: 0; 
         padding: 0;
} 

/*年齢・職業*/
.box002_name {
         text-align: right;
         font-size:14px;
}

/*リスト　数字*/
.ol-002 {
        counter-reset:list;
        list-style-type:none;
        font: 14px/1.6 'arial narrow', sans-serif;
        padding: 0px;
        border: solid 1px #dda0dd;
        text-align: left;


}
  
.ol-002 li {
        position:relative;
        line-height: 30px;
        margin: 7px 0 7px 40px;
        padding-left: 10px;
        font-weight: bold;
        font-size:14px;
}
  
.ol-002 li:before {
        counter-increment: list;
        content: counter(list);
        position: absolute;
        left: -35px;
        width: 30px;
        height: 30px;
        background: #dda0dd;
        text-align: center;
        color: #fff;
        top: 50%;
        -moz-transform: translateY(-50%);
        -webkit-transform: translateY(-50%);
        -o-transform: translateY(-50%);
        -ms-transform: translateY(-50%);
        transform: translateY(-50%);
}

/*リスト　数字なし*/
.ol-003 {
        counter-reset:list;
        list-style-type:none;
        font: 14px/1.6 'arial narrow', sans-serif;
        padding:0;
        text-align: left;

}
.ol-003 li {
        position:relative;
        padding: 0 0 0 20px;
        margin: 7px 0 7px 0px;
        font-weight: bold;
        font-size:14px;
        line-height: 30px;
        border-bottom: dashed 1px #dda0dd;
}
.ol-003 li:before {
        counter-increment: list;
        content: "";
        display: block;
        position: absolute;
        left: 0px;
        height: 15px;
        width: 15px;
        border-radius: 50%;
        background: #dda0dd;
        top: 50%;
        -moz-transform: translateY(-50%);
        -webkit-transform: translateY(-50%);
        -o-transform: translateY(-50%);
        -ms-transform: translateY(-50%);
        transform: translateY(-50%);
}
.ol-003 li:after {
        content: "";
        display: block;
        position: absolute;
        left: 6px;
        height: 0;
        width: 0;
        border-top: 4px solid transparent;
        border-bottom: 4px solid transparent;
        border-left: 5px solid #fff;
        top: 50%;
        -moz-transform: translateY(-50%);
        -webkit-transform: translateY(-50%);
        -o-transform: translateY(-50%);
        -ms-transform: translateY(-50%);
        transform: translateY(-50%);
}

/* ボックス＋黒点 */
.ul-001 {
        text-align: left;
        font-size:14px;

}

/* 詳しく見るボタン */

a.btn_08 {
        position: relative;
        display: block;
        color: #ffffff;
        font-size: 16px;
        text-decoration: none;
        text-align: center;
        width: 80%;
        margin-left: auto;
        margin-right: auto;
        
}
a.btn_08::before {
        content: "";
        position: absolute;
        top: 0;
        left: 0;
        margin: auto;
        width: 100%;
        height: 100%;
        background: linear-gradient(155deg, #ffbfbf 20%, #c2fcf9 40%, #f9c5ff 51%, #ffbfbf 80%);
        border-radius: 7em;
        box-sizing: border-box;
}
a.btn_08::after {
        content: "";
        position: absolute;
        top: 0;
        left: 0;
        margin: auto;
        width: 100%;
        height: 100%;
        background-color: #e90063;
        border-radius: 7em;
        box-sizing: border-box;
        transform: translate(0, -10px);
}
a.btn_08 span {
        position: relative;
        display: block;
        padding: 1rem 5rem;
        transform: translate(0, -10px);
        overflow: hidden;
        z-index: +1;
}
a.btn_08 span::before {
        content: "";
        position: absolute;
        top: -180px;
        left: 0;
        width: 30px;
        height: 100%;
        background-color: rgba(255, 255, 255, 0.8);
        opacity: 0;
        transform: rotate(45deg);
}
a.btn_08::after, a.btn_08 span {
  transition-property: transform;
  transition-duration: 0.3s;
}
a.btn_08:hover::after, a.btn_08:hover span {
  transform: translate(0, 0);
}
a.btn_08:hover span::before {
  animation: shine 1s ease-in-out 1;
}
@keyframes shine {
  0% {
    transform: scale(1) rotate(45deg);
    opacity: 0;
  }
  10% {
    transform: scale(1) rotate(45deg);
    opacity: 0.5;
  }
  20% {
    transform: scale(4) rotate(45deg);
    opacity: 1;
  }
  80% {
    transform: scale(50) rotate(45deg);
    opacity: 0;
  }
}

/* ここまであなたのCSSを記入してね */





