/******* Do not edit this file *******
Simple Custom CSS and JS - by Silkypress.com
Saved: Jun 17 2024 | 07:29:40 */
/*my css*/

html {
    font-size: 10px;
}

h1#site-name {
    font-size: clamp(1.4rem, 1.6vw, 2rem);
 	color: #7A8599;
}

h1#site-name a {
    color: #7A8599;
}

h1#site-name-w {
    font-size: clamp(1.4rem, 1.6vw, 2rem);
	color: #fff;
}

h1#site-name-w a {
	color: #fff;
}

h1#site-name a:hover {
    color: #81d1d4;
}

a,
a:visited {
    color: #0096a1;
}

a:hover {
    color: #81d1d4;
}

.text-spacing {
    letter-spacing: 0.2em;
}


/*蛍光マーカー黄色*/
.marker {
    display: inlin-blok;
    background: linear-gradient(transparent 20%, #e9d062);
    border-radius: 4px;
}

/*バイカラー見出し罫線*/
.line-bicolor {
    position: relative;
    height: 3.5em;
    border-bottom: 2px solid #CAE0E0;
}

.line-bicolor:after {
    content: "";
    position: absolute;
    width: 150px;
    border-bottom: 2px solid #81D1D4;
    padding-bottom: 5px;
    top: 0;
    bottom: 0;
    z-index: 10;
    height: 3.5em;
}

/* ページh1タイトル下線 */
.page-title {
    position: relative;
}

.page-title:after {
    content: "";
    border-top: 1px solid #0096A1;
    width: 15em;
    height: 1px;
    margin: 0 auto;
    display: block;
    position: absolute;
    bottom: 0.5em;
    left: 0;
    right: 0;
    z-index: 1;
}

/*ヘッダー3点中央ライン*/
.headline-icon {
    position: absolute;
}

.headline-icon:before {
    display: inline-block;
    width: 100%;
    height: 2em;
    content: "";
    background-image: url(https://dref.atelier-kiki.net/wp-content/uploads/2021/05/icon_deco01.png);
    background-size: 60%;
    background-repeat: no-repeat;
    background-position: top center;
    top: 0;
    left: 0;
}

/*吹き出し3行*/
.balloon {
    width: 100%;
    color: #7A8599;
    padding: 1.2em 1.6em 0.5em 1.75em;
    position: relative;
    border: 2px solid #7A8599;
    box-sizing: border-box;
    border-radius: 8px;
    background-color: #fff;
}

.talk-left:before {
    border: 9px solid transparent;
    border-right: 9px solid #fff;
    /*上*/
    z-index: 2;
}

.talk-left:after {
    border: 12px solid transparent;
    border-right: 12px solid #7A8599;
    /*下*/
    z-index: 1;
}

.talk-left:before,
.talk-left:after {
    content: "";
    position: absolute;
    top: 50%;
    left: 0;
    transform: translate(-100%, -50%);
}

.talk-right:before {
    border: 9px solid transparent;
    border-left: 9px solid #fff;
    z-index: 2;
}

.talk-right:after {
    border: 12px solid transparent;
    border-left: 12px solid #7A8599;
    z-index: 1;
}

.talk-right:before,
.talk-right:after {
    content: "";
    position: absolute;
    top: 50%;
    right: 0;
    transform: translate(100%, -50%);
}

.main-color {
    color: #0096A1;
}

/* =トークアイコン= */
.face {
    width: 90px;
    height: 90px;
    border-radius: 50%;
    background-size: cover;
    border: 2px solid;
}

.face-red {
    border-color: #A10000;
    margin-left: 30px;
}

.face-red-01 {
    background-image: url('https://dref.atelier-kiki.net/wp-content/uploads/2023/07/pen-maru01.png');
}

.face-red-02 {
    background-image: url('https://dref.atelier-kiki.net/wp-content/uploads/2023/07/pen-maru02.png');
}

.face-red-03 {
    background-image: url('https://dref.atelier-kiki.net/wp-content/uploads/2023/07/pen-maru03.png');
}

.face-red-04 {
    background-image: url('https://dref.atelier-kiki.net/wp-content/uploads/2023/07/pen-maru04.png');
}

.face-red-05 {
    background-image: url('https://dref.atelier-kiki.net/wp-content/uploads/2023/07/pen-maru05.png');
}

.face-red-06 {
    background-image: url('https://dref.atelier-kiki.net/wp-content/uploads/2023/07/pen-maru06.png');
}

.face-red-07 {
    background-image: url('https://dref.atelier-kiki.net/wp-content/uploads/2023/09/pen-maru07.png');
}

.face-red-08 {
    background-image: url('https://dref.atelier-kiki.net/wp-content/uploads/2023/07/pen-maru08.png');
}

.face-red-09 {
    background-image: url('https://dref.atelier-kiki.net/wp-content/uploads/2023/07/pen-maru09.png');
}

.face-red-10 {
    background-image: url('https://dref.atelier-kiki.net/wp-content/uploads/2023/07/pen-maru10.png');
}

.face-red-11 {
    background-image: url('https://dref.atelier-kiki.net/wp-content/uploads/2023/07/pen-maru11.png');
}

.face-red-12 {
    background-image: url('https://dref.atelier-kiki.net/wp-content/uploads/2023/10/pen-maru12.png');
}

.face-green {
    border-color: #0096A1;
    margin-right: 30px;
}

.face-green-01 {
    background-image: url('https://dref.atelier-kiki.net/wp-content/uploads/2023/07/usa-maru01.png');
}

.face-green-02 {
    background-image: url('https://dref.atelier-kiki.net/wp-content/uploads/2023/07/usa-maru02.png');
}

.face-green-03 {
    background-image: url('https://dref.atelier-kiki.net/wp-content/uploads/2023/07/usa-maru03.png');
}

.face-green-04 {
    background-image: url('https://dref.atelier-kiki.net/wp-content/uploads/2023/07/usa-maru04.png');
}

.face-green-05 {
    background-image: url('https://dref.atelier-kiki.net/wp-content/uploads/2023/07/usa-maru05.png');
}

.face-green-06 {
    background-image: url('https://dref.atelier-kiki.net/wp-content/uploads/2023/07/usa-maru06.png');
}

.face-green-07 {
    background-image: url('https://dref.atelier-kiki.net/wp-content/uploads/2023/07/usa-maru07.png');
}

.face-green-08 {
    background-image: url('https://dref.atelier-kiki.net/wp-content/uploads/2023/07/usa-maru08.png');
}

/* == index メニューアイコン == */

#index-icon li {
    background-repeat: no-repeat;
    background-size: 3em;
    background-position: left center;
    padding-left: 2em;
}

#index-icon li:nth-child(1) {
    background-image: url('https://dref.atelier-kiki.net/wp-content/uploads/2022/06/menu-icon01.png');
}

#index-icon li:nth-child(2) {
    background-image: url('https://dref.atelier-kiki.net/wp-content/uploads/2022/06/menu-icon02.png');
}

#index-icon li:nth-child(3) {
    background-image: url('https://dref.atelier-kiki.net/wp-content/uploads/2022/06/menu-icon03.png');
}

#index-icon li:nth-child(4) {
    background-image: url('https://dref.atelier-kiki.net/wp-content/uploads/2022/06/menu-icon04.png');
}

#index-icon li:nth-child(5) {
    background-image: url('https://dref.atelier-kiki.net/wp-content/uploads/2022/06/menu-icon05.png');
}

#index-icon li:nth-child(6) {
    background-image: url('https://dref.atelier-kiki.net/wp-content/uploads/2022/06/menu-icon06.png');
}

#index-icon li:nth-child(7) {
    background-image: url('https://dref.atelier-kiki.net/wp-content/uploads/2022/06/menu-icon07.png');
}

#index-icon li:nth-child(8) {
    background-image: url('https://dref.atelier-kiki.net/wp-content/uploads/2022/06/menu-icon08.png');
}

#index-icon li:nth-child(9) {
    background-image: url('https://dref.atelier-kiki.net/wp-content/uploads/2022/06/menu-icon09.png');
}

/*== index メニューアイコン end ==*/

.font-down {
    font-size: 3.5rem;
    padding-right: 0.1em;
}

/*円マーク小文字用*/

.font-down2 {
    padding-right: 0.1em;
    vertical-align: 0.3em;
    font-size: 1.2rem;
    line-height: 1em;
}

/*〜水平比率調整*/

.font-wmin {
    display: inline-block;
    margin-left: -0.1em;
    vertical-align: -0.05em;
    transform: scaleX(0.6);
}

/*（※）調整*/

.point-bg {
    position: relative;
    z-index: 1000;
}

.point-bg:after {
    position: absolute;
    display: inline-block;
    content: "";
    right: -9%;
    top: -150px;
    width: 300px;
    height: 300px;
    z-index: -1000;
    background-image: url(https://dref.atelier-kiki.net/wp-content/uploads/2023/09/top-bgclass-01.png);
    background-size: contain;
    background-repeat: no-repeat;
}

.grid-col {
    grid-column: 1/4;
}

.bg2color:after {
    content: "";
    position: absolute;
    display: block;
    background-color: #80D1D430;
    width: 100%;
    height: 50%;
    bottom: 0;
}

@media(max-width: 1024px) {
    .point-bg:after {
        right: 8%;
    }
}

/*footer*/
#footer-menu h5 {
    font-size: 1.8rem;
    color: #0096A1;
}

#footer-menu ul {
    list-style-type: none;
}

#footer-menu ul li {
    font-size: 1.4rem;
}

#footer-menu a {
    color: #7a8599;
}

#footer-menu a:hover {
    color: #0096A1;
}

/*ハンバーガーアイコンアニメーション*/
.gnaviBtn {
    position: relative;
    background-color: #81d1d4;
    width: 48px;
    height: 48px;
    border-radius: 5px;
    cursor: pointer;
	z-index: 1000;
}

.gnaviBtn span {
    display: inline-block;
    height: 2px;
    width: 50%;
    background-color: #fff;
    position: absolute;
    left: 0;
    right: 0;
    margin: 0 auto;
    border-radius: 1px;
	 transition: all .4s;
}

.gnaviBtn span:nth-child(1) {
    top: 11px;
}

.gnaviBtn span:nth-child(2) {
    top: 19px;
}

.gnaviBtn span:nth-child(3) {
    top: 27px;
}

.gnaviBtn span:nth-child(3):after {
    content: "menu";
    display: block;
    position: absolute;
    top: 4px;
    left: -3px;
    color: #fff;
    font-size: 1rem;
    font-weight: 700;
    text-transform: uppercase;
}

.gnaviBtn.active span:nth-of-type(1) {
    transform: translateY(8px) rotate(-45deg);
}

.gnaviBtn.active span:nth-of-type(2) {
    opacity: 0;
}

.gnaviBtn.active span:nth-of-type(3) {
    transform: translateY(-8px) rotate(45deg);
}

.gnaviBtn.active span:nth-of-type(3)::after {
    content: "close";
    transform: translate(11px, 3px) rotate(-45deg);
}

/*popupメニューのアイコン設定*/

.popup {
    width: 100vw;
    height: 100vh;
    position: fixed;
	 display: flex;
	 z-index:100;
	 top: 0;
}

#popup-menu {
    border: 2px solid #81d1d4;
	border-radius: 0  0  0 15px;
	overflow: hidden;
	position:absolute;
	top: 0;
	right: -100%;
	transition: all 0.6s;
	width: 240px;
}

#popup-menu ul {
    margin: 100px 2em 4em;
}

#popup-menu li {
    padding-left: 1em;
    margin-bottom: 0.5em;
}

#popup-menu li:last-child {
    margin-bottom: 0em;
}

#popup-menu.panelactive {
	right: -5px;
}


#popup-menu li {
    position: relative;
}

#popup-menu li:before {
    content: "";
    width: 2.5em;
    height: 100%;
    background-position: center center;
    background-size: contain;
    background-repeat: no-repeat;
    position: absolute;
    filter: invert(59%) sepia(8%) saturate(784%) hue-rotate(180deg) brightness(87%) contrast(91%);
	transform: translatex(-1.5em);
}

#popup-menu li:nth-child(1):before {
    background-image: url('/wp-content/uploads/2024/05/toudai.svg');
}

#popup-menu li:nth-child(2):before {
    background-image: url('/wp-content/uploads/2024/05/kurage.svg');
}

#popup-menu li:nth-child(3):before {
    background-image: url('/wp-content/uploads/2024/05/manta.svg');
}

#popup-menu li:nth-child(4):before {
    background-image: url('/wp-content/uploads/2024/05/kujira.svg');
}

#popup-menu li:nth-child(5):before {
    background-image: url('/wp-content/uploads/2024/05/kuma.svg');
}