/*
Theme Name: NewDesgin2509
Theme URI: https://wordpress.org/themes/twentytwentyfour/
Author: the WordPress team
Author URI: https://wordpress.org
Description: Twenty Twenty-Four is designed to be flexible, versatile and applicable to any website. Its collection of templates and patterns tailor to different needs, such as presenting a business, blogging and writing or showcasing work. A multitude of possibilities open up with just a few adjustments to color and typography. Twenty Twenty-Four comes with style variations and full page designs to help speed up the site building process, is fully compatible with the site editor, and takes advantage of new design tools introduced in WordPress 6.4.
Requires at least: 6.4
Tested up to: 6.6
Requires PHP: 7.0
Version: 1.2
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: twentytwentyfour
Tags: one-column, custom-colors, custom-menu, custom-logo, editor-style, featured-images, full-site-editing, block-patterns, rtl-language-support, sticky-post, threaded-comments, translation-ready, wide-blocks, block-styles, style-variations, accessibility-ready, blog, portfolio, news
*/
@charset "UTF-8";
@import url('https://fonts.googleapis.com/css2?family=Montserrat:wght@300;400;700&display=swap');


a {
	text-decoration: none;
	display: block;
	outline: none;
}

a:hover {
	opacity: 0.6;
	border: none;
	text-decoration: none;
}

body {
  margin: 0;
  padding:0;
  font-family: Montserrat, sans-serif;
	background-color: #fff;
}

h1 {
	color: #504CFF;
	text-align: left;
	font-weight: bold;
	font-size: 24px;
	font-family: Montserrat,sans-serif;
	font-weight: 800;
}

h1.wp-block-post-title {
	font-size: 22px;
	line-height: 1.4;
}

.wp-block-group h1 {
	padding-top: 30px!important;
}

h2 {
	color: #504CFF;
	font-size: 22px!important;
	font-family: Montserrat,sans-serif;
	font-weight: 800;
}

h2 a {
	color: #504CFF!important;
}
h2.wp-block-heading {
	margin-top: 40px;
}

h3 {
	color: #3B3B58;
	font-weight: 600;
	font-size: 18px;
	font-family: Montserrat,sans-serif;
}

h3.wp-block-heading {
	margin-top: 30px;
}

h4 {
	color: #CC2F7A;
	text-align: left;
	font-weight: bold;
	font-family: Montserrat,sans-serif;
}

h5 {
  color: #0F0F12;
  text-align: left;
  font-weight: normal;
  font-size: 12px;
}

p,li {
	color: #494964;
	line-height: 1.6;
	font-weight: 500;
}


.topic-heading {
  text-align: center;
  font-weight: bold;
  font-size: 16px;
  border-bottom: 1px solid #0F0F12;
  margin: 35px 0 20px 0;
  padding-bottom: 10px;
  width: 100%;
}

.topic-heading2 {
  text-align: center;
  font-weight: bold;
  font-size: 14px;
  border: 1px dashed #555;
  margin: 35px 0 20px 0;
  padding-bottom: 10px;
  padding-top: 10px;
  width: 100%;
}


.border-line {
 border-top: 1px solid #0F0F12;
 margin: 20px 0 20px 0;
}


.article-text {
  text-align: left;
  line-height: 120%;
  margin-bottom: 20px;
  font-size: 14px;
}

.topic-area {
  margin: 0;
}

.image-caption {
  text-align: center;
  font-size: 10px;
  margin-bottom: 15px;
  margin-top: 10px;
}


.footer {
  width: 100%;
  overflow: hidden;
  background-color: #504CFF;
}

.footer-socialmedia {

  padding: 10px;
  display: flex;
  justify-content: center;
}

.footer-socialmedia img {
  width: 30px;
  margin: 10px;
}

.copyright {
  text-align: center;
  font-size: 1px;
  margin-bottom: 5px;
  font-size: 10px;
}

.logo {
  width: 100%;
  margin: 18px 0 18px 0;
  display: block;
  text-align: center;
}

.logo img {
  width: 45%;

}

.top-area {
  background-color: #71eeff;
  padding: 15px;
}


.top-area-innner {
  width:100%;
}

.to-cm {
  font-size: 12px;
  font-weight: bold;
  color: #0F0F12;
}
.to-cm a{
  font-size: 12px;
  font-weight: bold;
  color: #0F0F12;
}

.head-info {
  display: flex;
  font-size: 11px;
  justify-content: flex-end;
}

.head-info .left {
  display: flex;
  align-items: center;
  margin-right: 10px;
}

.head-info .right {
  font-size: 10px;
}

.blog-inner {
  margin: 16px;
}

.article-event {
  color: #151515;
  text-align: left;
  font-family: Montserrat;
  margin: auto;
  max-width: 1000px;
  background-color: #fff;
}


.article-tag {
  width: 100%;
  display: flex;
}

.tag {
  color: #151515;
  border-radius: 30px;
  font-size: 12px;
  font-weight: bold;
}

.read-button {
  color: #0F0F12;
  text-align: center;
  font-weight: bold;
  background-color: #26DBF4;
  padding: 10px;
  width: 120px;
  border-radius: 5px;
  margin: 15px auto;
  font-size: 10px;
}

.read-button a{
  color: #0F0F12;
  text-decoration: none;
}

#outer {
  margin: 0;
}

#outer img{
  margin: 0;
  width: 100%;
  vertical-align: bottom;
}

.spimgsize {
  width: 85% !important;
  margin: auto !important;
  display: block !important;
}


/* ================================
        header追記　20250909
================================ */

.coolmicblog-header {
	padding:0; 
	margin:0; 
	max-width:inherit;
}
.has-base-background-color {
	background-color: #fff!important;
}

.header-bg {
	padding: 40px 0; 
	box-sizing: border-box; 
	background: #00C2FF; 
	background: linear-gradient(90deg,rgba(0, 194, 255, 1) 0%, rgba(80, 76, 255, 1) 100%); 
	width:100%; 
	margin:0 auto; 
	text-align:center; 
	display: block!important;
}

.wp-block-logo {
	display: block;
	width: 30%;
	margin: 0 auto!important;
}

.wp-block-logo a img {
	width: 100%;
}

.logo-txt {
	 color: #fff; 
	text-align:center; 
	font-weight: 700;
}

.header-nav {
	margin: 0 auto!important;
	width: 100%;
	margin: 0 auto;
	padding: 0 5.5rem;
	text-align: center;
}


.wp-block-navigation {
	margin: 0 auto!important;
	text-align: center;
}

.header-nav-ul {
	display: flex;
	justify-content: center;
	list-style: none;
}

.header-nav-ul li {
	margin: 0 2em;
	font-weight: 800!important; 
}

.wp-block-navigation .wp-block-navigation-item a{
	font-weight: 800;
	color: #3B3B58!important;
	text-align: center;
	padding: 0 20px;
	font-size: 16px!important;
}
.wp-block-navigation.items-justified-right {
    --navigation-layout-justification-setting: center;
    --navigation-layout-justify: center;
}

@media screen and (max-width: 599px) {
/* ハンバーガーアイコンを3本線風にする */
	.header-nav{
		padding: 0;
	}	
	header nav {
		width: 100%;
	}
button.wp-block-navigation__responsive-container-open {
	position: relative!important;
	width: 30px!important;
	height: 25px!important;
	display: inline-block!important;
	margin: 0 10px 10px!important;
	outline: none;
}

/* 上と下の2本線 */
button.wp-block-navigation__responsive-container-open::before,
button.wp-block-navigation__responsive-container-open::after {
  content: "";
  position: absolute;
  left: 0;
  width: 100%;
  height: 2px;
  background: currentColor;
  transition: transform 0.3s ease;
}
button.wp-block-navigation__responsive-container-open svg {
	display:none;
}
/* 上の線 */
button.wp-block-navigation__responsive-container-open::before {
  top: 0;
}

/* 下の線（中央の線をbox-shadowで追加） */
button.wp-block-navigation__responsive-container-open::after {
  bottom: 0;
  box-shadow: 0 -12px 0 currentColor; /* ← 中央線を擬似的に追加 */
}
}
/* ================================
        footer追記 20250909
================================ */
footer {
 	background-color: #504CFF;
	padding: 0 40px;
	box-sizing: border-box;
	margin: 0;
	color: #fff!important;
}
footer p {
 	color: #fff;
}
footer div div div div.wp-block-group-is-layout-flex {
    gap: 0.4rem!important;
}
.footer-logo-txt {
	font-size: 14px;
	text-align: left;
}
.sns-box {
	max-width: 160px;
	margin: 0 0 0 auto;
}
.sns-title {
	font-size: 24px;
	font-weight: 700;
}
.sns-link {
	display: flex;
	justify-content: flex-end;
}
.sns-link a{
	margin: 0 14px 0 0;
}

.sns-link a img{
	width: 40px;
}
.copy-light {
	font-size:12px;
	text-align: right;
}

.wp-block-post-date {
	color:#3B3B58!important;
	font-weight: 600;
}
.taxonomy-category {
	display: flex;
	flex-wrap: wrap;
}
.taxonomy-category a{
	background-color: #EDF1FF;
	color:#494964;
	font-weight: 700;
	border-radius: 50px;
	padding: 5px 15px;
	box-sizing: border-box;
	margin: 0 5px 10px 0;
	align-items: center;
	text-align: center;
	font-size: 12px;
	white-space: nowrap;
}
.wp-block-post-terms .wp-block-post-terms__separator {
	display:none;
}
.wp-block-site-logo {
	margin-bottom: 10px!important;
}
/* ================================
        20250912追加
================================ */
.home-contents {
	max-width: 1200px;
	margin: 0 auto;
}
.single-contents {
	max-width: 840px;
	margin: 0 auto;
	padding: 0 15px;
	box-sizing: border-box;
}

.otter-image-box {
	display: flex;
	justify-content: center;
	margin: 0;
}

.otter-image-box img {
	width: 10%;
}

hr {
	display: none;
}

/* btn */
.wp-block-button {
	min-width: 45%;
}

.wp-block-button a {
	background: #504CFF;
	background: linear-gradient(90deg,rgba(80, 76, 255, 1) 30%, rgba(152, 168, 255, 1) 100%);
	border-radius: 50px;
	width: 100%;
	font-weight: 700;
	font-size: 16px;
	padding: 12px 30px;
	box-sizing: border-box;
}
.wp-block-post-terms__prefix {
  display: none;
}

ul.wp-block-list li {
	line-height: 1.6!important;
}

.wp-block-post-content p a,
a:where(:not(.wp-element-button)){
	display: inline-block!important;
	text-decoration: underline;
	color: #3B3B58;
}

.wp-block-post-content p strong {
	color: #3B3B58;
}

/* ================================
        media
================================ */



@media screen and (min-width: 690px) {


  .wrapper-contents {
    display: flex;
    flex-wrap: wrap;
    overflow:hidden;
    background: lightblue;/*ここの色変えで中央カラムの背景色変わる*/
  }

  article {
    background-color: #fff;
  }

  h1 {
    color: #504CFF;
    text-align: left;
    font-weight: 800;
    font-size: 36px;
  }
  
  h2 {
	  color: #504CFF;
	  font-size: 24px!important;
	  line-height: 1.4;
  }
  
  h3 {
    color: #3B3B58!important;
    font-weight: 500;
    font-size: 22px;
  }
  
  h4 {
    color: #CC2F7A;
    text-align: left;
    font-weight: bold;
  }
  
  h5 {
    color: #0F0F12;
    text-align: left;
    font-weight: normal;
    font-size: 14px;
  }

  .article-text {
    text-align: left;
    line-height: 120%;
    margin-bottom: 20px;
    font-size: 20px;
  }
  
  .topic-heading {
    text-align: center;
    font-weight: bold;
    font-size: 25px;
    border-bottom: 1px solid #0F0F12;
    margin: 35px 0 20px 0;
    padding-bottom: 10px;
    width: 100%;
  }
  

  .logo {
    width: 100%;
    margin: 32px 0 32px 0;
    display: block;
    text-align: center;
  }
  
  .logo img {
    width: 25%;
  
  }

  .tag {
    color: #151515;
    border-radius: 30px;
    font-size: 13px;
    font-weight: bold;
  }  


  .top-area-innner {
    width:1000px;
    margin: auto;
   }
   
   .blog-inner {
    margin: 0;
   }

   .article-block {
    display: flex;
    justify-content: space-between;
   }

   .block-inner {
    display: block;
    width: 32%;
    margin-bottom: 30px;
   }

   .block-inner {
    display: block;
    width: 32%;
    margin-bottom: 30px;
   }

   .topic-area {
    margin: 15px;
  }

  .spimgsize {
    width: 100% !important;
  }
}

@media screen and (max-width: 690px) {
	.wp-block-logo {
		width: 80%;
	}
	.wp-block-button {
		width: 85%;
		min-width: inherit;
	}
	.otter-image-box img {
    width: 30%;
	}
	.columns-3 li{
		padding: 0 0 20px;
		box-sizing: border-box;
	}
	footer {
		text-align: center;
		padding: 0 20px;
	}
	footer .is-layout-flex {
		display: block;
	}
	.sns-box {
		width: 100%;
		max-width: inherit;
		margin: 40px 0 0!important;
		text-align: center;
	}
	.sns-link {
		justify-content: center;
		padding: 10px 0;
		box-sizing: border-box;
	}
	.copy-light {
		text-align: center;
	}
}